css - 是否可以@extend Foundation SCSS 类？

Question

按预期使用 Zurb 基金会提供的工具意味着您必须妥协您的 HTML 标记。您将添加 HTML 不需要的类，只是为了引入 Foundation 功能。

使用 SASS 源代码，我试图通过使用 @extend 来避免上述问题。

---

我想避免的一些 HTML 标记示例

<nav id="main_navigation" class="top-bar">

通过这样做

#main_navigation {
  @extend .top-bar;
}

---

我意识到这仍然会编译成冗余的 CSS 并且可能会破坏顶部栏的 JS 功能，但让我们把它留到另一个问题。

问题是它不起作用!适用于 .top-bar 的子类以及任何伪类的样式不会扩展以适用于 #main_navigation。我试过 recreate the problem in a CodePen ，但是那边的编译代码是完美无缺的。

那么这是 Foundation 的结构性问题吗？还是我搞砸了什么？

我使用带有 grunt-sass 的 Grunt 任务来编译 Foundation SASS，然后使用我自己的代码。

Answer 1

在使用 CodePen 进行更广泛的调试后，我认为问题必须出在编译器中。

从 grunt-sass 切换到更稳定(但更慢)的 grunt-contrib-sass 使所有意外行为都消失了。

是的，你可以@extend Foundation SCSS