基本例子

以下內容：

.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);
  }
}