多個擴充套件單個選擇器

以下少

.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 的覆蓋。通過關注訂單元素的擴充套件，可以輕鬆覆蓋樣式。