學習一下Sass @extend 與 繼承

導讀	Sass (英文全稱：Syntactically Awesome Stylesheets) 是一個最初由 Hampton Catlin 設計並由 Natalie Weizenbaum 開發的層疊樣式表語言。

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

將以上程式碼轉換為 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 很好的體現了程式碼的複用。

原文來自：