多个扩展单个选择器

以下少

.paragraph{
  font-size: 12px;
  color: darkgrey;
  background: white;
}

.special-paragraph{
  font-size: 24px;
  font-weight: bold;
  color: black;
}

.parent{
  background: lightgrey;
  .nestedParagraph{
    &:extend(.paragraph);
    &:extend(.special-paragraph);
  }
}

将编译为

.paragraph,
.parent .nestedParagraph {
  font-size: 12px;
  color: darkgrey;
  background: white;
}
.special-paragraph,
.parent .nestedParagraph {
  font-size: 24px;
  font-weight: bold;
  color: black;
}
.parent {
  background: lightgrey;
}

使用提供的 html：

<div class="parent">
  Parent Words
  <div class="nestedParagraph">
    Nested Words
  </div>
</div>

<div class="special-paragraph">
  Special Words
</div>

<div class="paragraph">
  Normal Paragraph
</div>

我们看到以下结果：

在这个特殊的例子中，nestedParagraph 想要使用 paragraph 的样式，并使用 special-paragraph 的覆盖。通过关注订单元素的扩展，可以轻松覆盖样式。