Sass @extend 與 繼承

@extend 指令告訴 Sass 一個選擇器的樣式從另一選擇器繼承。

如果一個樣式與另外一個樣式幾乎相同，只有少量的區別，則使用 @extend 就顯得很有用。

以下 Sass 實例中，我們創建了一個基本的按鈕樣式 .button-basic，接著我們定義了兩個按鈕樣式 .button-report 與 .button-submit，它們都繼承了 .button-basic ，它們主要區別在於背景顏色與字體顏色，其他的樣式都是一樣的。

Sass 代碼：

.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  {
  @extend .button-basic;
  background-color: green;
  color: white;
}

將以上代碼轉換為 CSS 代碼，如下所示：

Css 代碼：

.button-basic, .button-report, .button-submit {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button-report  {
  background-color: red;
}

.button-submit  {
  background-color: green;
  color: white;
}

使用 @extend 後，我們在 HTML 按鈕標籤中就不需要指定多個類 class="button-basic button-report" ，只需要設置 class="button-report" 類就好了。

@extend 很好的體現了代碼的複用。