将 Emmet 与 Zurb 基础类选择器一起使用答案

【问题标题】：Using Emmet with Zurb Foundation Class selectors将 Emmet 与 Zurb 基础类选择器一起使用
【发布时间】：2014-10-18 10:12:00
【问题描述】：

我正在使用 Foundation Zurbs 类选择器来构建 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 简码：

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

问候

【问题讨论】：

large-4 和 columns 是独立的 CSS 类。在 HTML 源代码中，它们是用空格分隔的，但多个类的 CSS 源代码不能这样工作。你试过div.large-4.columns*3吗？
啊当然@Neil - 你完全正确 - 我看不到那里的树木。太忙于理解 Foundation 而不是理解我在做什么！
我当然想出了一个更简洁的方法.large-4.columns*3
很高兴我能帮上忙。我将我的评论转换为答案，以便您将其标记为答案。

标签： zurb-foundation emmet

【解决方案1】：

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

【讨论】：