繼承 Extent/Inderitance

繼承：可以將某個元素設定的參數複製到另一個元素。
使用 % 佔位符號宣告，將所有相同樣式內容合併，再以 @extend 來引入使用。重複寫的相同樣式延伸到要套用的 class 上，並將有用到的 extends 輸出成 css，這樣可以有效減少 css 的行數，優化整體的呈現效果。

例如:

／／ｓｃｓｓ／／
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

%equal-heights {
  display: flex;
  flex-wrap: wrap;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}

.error {
  @extend %message-shared;
  border-color: red;
}

.warning {
  @extend %message-shared;
  border-color: yellow;
}

　編｜ ．有被 @extend 的 class 才會被編譯成 CSS 程式碼，並用 %message-shared整合到共用樣式，
　譯｜　且可以在其他地方共用這段樣式時使用**@extend %message-shared**　
　後｜ ．共用屬性　%equal-heights 沒有被共用，在編譯成 CSS 後並不會產生，這個寫法又被稱為
　　Ｖ　「佔位選擇器（placeholder selector）」。

／／ｃｓｓ／／
.message, .success, .error, .warning {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

多重擴展
@extend也可以擴展多個選擇器，代表它繼承了擴展選擇器的樣式。

例如:

／／ｓｃｓｓ／／

.error {
  background-color: #ffffff;
}

.notice {
  font-size: 25rem;
  font-family: Arial, Helvetica, sans-serif;
  font-color: #000;
}

.seriousError {
  @extend .error;
  @extend .notice;
  background-color: #6b0a0a;
}

　編｜
　譯｜　　
　後｜
　　Ｖ　

／／ｃｓｓ／／
.error, .seriousError {
  background-color: #ffffff;
}

.notice, .seriousError {
  font-size: 25rem;
  font-family: Arial, Helvetica, sans-serif;
  font-color: #000;
}

.seriousError {
  background-color: #6b0a0a;
}