将Emmet与Zurb Foundation Class选择器配合使用

Question

我正在使用Foundation Zurbs类选择器来使用HTML构建页面。我正在使用Emmet / Zen Coding来构建页面，并且无法弄清楚如何将Emmet快捷方式用于包含空格的类选择器。

所以要澄清下面的Emmet短代码：

div.large-4*3

生成代码

<div class="large-4"></div>
<div class="large-4"></div>
<div class="large-4"></div>

但是，Zurb类选择器的空格“”大小为

"large-4 columns"

如果我尝试在短代码语法中使用此类选择器，如下所示

div.large-4 columns*3

它产生以下html

div.large-4 <columns></columns>
<columns></columns>
<columns></columns>

如何编写产生的Emmet Shortcode：

<div class="large-4 columns"></div>
<div class="large-4 columns"></div>
<div class="large-4 columns"></div>

此致

K *

Answer 1

large-4和columns是单独的CSS类。在HTML class属性中，您可以在以空格分隔的列表中指定它们，但在CSS中，您只需连接选择器，例如<div class="large-4 columns">的CSS选择器为div.large-4.columns。假设这个短代码采用CSS选择器并生成等效的HTML，那么最后只需要*3。