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

Question

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

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

.success
  @extend .message
  border-color: green

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

nav
  ul
    font-size: 20px

.active
  @extend ???
  background: pinky

有可能，如果可能，怎么样？我不确定要谷歌用什么...

Answer 1

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

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

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