是否可以@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，但那里的编译代码完美无瑕。

这是基金会的结构性问题吗？或者我搞砸了什么？

我在grunt-sass中使用Grunt任务，用它自己的代码编译Foundation SASS。

Answer 1

使用CodePen进行了一些更广泛的调试后，我发现问题必须在编译器中。

从grunt-sass切换到更稳定（但速度更慢）grunt-contrib-sass会使所有意外行为消失。

是的，你可以@extend基金会SCSS