将Emmet与Zurb Foundation Class选择器一起使用

Question

我使用FoundationZurbs类选择器在HTML中构建页面。我正在使用Emmet/Zen编码来构建页面，但不知道如何将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。