如何在 SASS 中扩展组件而不是类答案

【问题标题】：How to extend a component not class in SASS如何在 SASS 中扩展组件而不是类
【发布时间】：2016-12-21 03:06:11
【问题描述】：

在this example (under Extend/Inheritance) 中，展示了如何扩展预先声明的样式。

.message
  border: 1px solid #ccc
  padding: 10px
  color: #333

.success
  @extend .message
  border-color: green

我想知道是否有办法扩展一个类。原因是我有一个nav，在它下面我有ul。这些被格式化为应该的但现在我想添加类 active 也采用 nav 中的 ul 样式和用背景颜色完成它。

nav
  ul
    font-size: 20px

.active
  @extend ???
  background: pinky

有可能吗？如果有，怎么做？我不知道用谷歌搜索什么...

【问题讨论】：

差不多，但不完全。 Sass can @extend a regular ol' selector 例如 nav 或 ul 但它不能 @extend 链式选择器，所以 @extend nav ul; 将不起作用。 @Jon Uleis 下面的方法可能就是您所追求的。

【解决方案1】：

这似乎是应用修饰符类的一种非常迂回的方式 (.active)。通常最好的做法是这样做：

nav
  ul
    font-size: 20px
    &.active
      background: pink

这将编译为 nav ul.active { background: pink } 和样式 <nav> <ul class="active"></ul> </nav>。

【讨论】：