基本例子

以下内容：

.paragraph{
  font-size: 12px;
  color: blue;
  background: white;
}
.parent{
  font-size: 14px;
  color: black;
  background: green;
  .nestedParagraph:extend(.paragraph){
    
  }
}

将编译成以下 css：

.paragraph,
.parent .nestedParagraph {
  font-size: 12px;
  color: blue;
  background: white;
}
.parent {
  font-size: 14px;
  color: black;
  background: green;
}

我们已将 .paragraph 的样式应用于 .parent .nestedParagraph 元素！ 假设我们的 HTML 是：

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

我们的输出将是

这是将许多预配置样式轻松应用于深层嵌套组件的一种方法。

扩展可以另外与 ＆，父选择特征一起使用 ，下面的编译与上面相同。

.paragraph{
  font-size: 12px;
  color: blue;
  background: white;
}
.parent{
  font-size: 14px;
  color: black;
  background: green;
  .nestedParagraph{
    &:extend(.paragraph);
  }
}