• 繼承的例子
  .button {
  padding: 10px 20px;
  border-radius: 5px;
  background-color: blue;
  color: white;
  }

.primary-btn {
@extend .button;
background-color: green;
}

.secondary-btn {
@extend .button;
background-color: grey;
}

• .primary-btn 繼承了 .button 的所有樣式，使用 @extend .button

• .secondary-btn 同樣繼承了 .button 的所有樣式，使用 @extend .button

• 編譯後
  .button, .primary-btn, .secondary-btn {
  padding: 10px 20px;
  border-radius: 5px;
  color: white;
  }

.button {
background-color: blue;
}

.primary-btn {
background-color: green;
}

.secondary-btn {
background-color: grey;
}

• .button、.primary-btn、.secondary-btn 共同擁有這些樣式，這是 @extend 合併樣式的結果，減少了重複定義
• padding、border-radius、color 都是這些按鈕的共有樣式