@extend 指令告訴 Sass 一個選擇器的樣式從另一選擇器繼承。
如果一個樣式與另外一個樣式幾乎相同，隻有少量的差別，則使用 @extend 就顯得很有用。
以下 Sass 執行個體中，我們建立了一個基本的按鈕樣式 .button-basic，接着我們定義了兩個按鈕樣式 .button-report 與 .button-submit，它們都繼承了 .button-basic ，它們主要差別在于背景顔色與字型顔色，其他的樣式都是一樣的。
.button-basic {
border: none;
padding: 15px 30px;
text-align: center;
font-size: 16px;
cursor: pointer;
}
.button-report {
@extend .button-basic;
background-color: red;
.button-submit {
background-color: green;
color: white;
将以上代碼轉換為 CSS 代碼，如下所示：
.button-basic, .button-report, .button-submit {
使用 @extend 後，我們在 HTML 按鈕标簽中就不需要指定多個類 class="button-basic button-report" ，隻需要設定 class="button-report" 類就好了。
@extend 很好的展現了代碼的複用。