在撰寫 CSS 過程中，為了避免 CSS 太龐大，當我們有用到相同的樣式時，

都會將它合併起來如下：

/* 第200行位置 */
.header h1,
.content h1,
.footer h1 {
  font-size: 20px;
  line-height: 1.8;
  letter-spacing: 1px;
}
/* 第400行位置 */
.header h1 {
  color: black;
}
/* 第1000行位置 */
.content h1 {
  color: green;
}
/* 第N000行位置 */
.footer {
  color: pink;
}

但這樣子會有個麻煩的地方是，假設合併樣式程式碼的位置在第 200 行，而我目前位置是在 N 千多行。

當需要合併樣式時，又必須回到第 200 行來合併 class 樣式，所以當程式碼越變越多時，

要集中相同樣式的工作流程相對也會變得更加繁瑣。

因此 Sass ＠extend 繼承的方式可以解決這樣的問題。

使用 Sass 的 ＠extend：

.all-h1 /*建立繼承用的樣式*/
    font-size: 20px
    line-height: 1.8
    letter-spacing: 1px
.header h1
    @extend .all-h1
    color: #000
.content h1
    @extend .all-h1
    color: green
.footer
    @extend .all-h1
    color: pink

這樣產生的結果會是

/* 第200行位置 */
.all-h1,
.header h1,
.content h1,
.footer h1 {
  font-size: 20px;
  line-height: 1.8;
  letter-spacing: 1px;
}
/* 第400行位置 */
.header h1 {
  color: black;
}
/* 第1000行位置 */
.content h1 {
  color: green;
}
/* 第N000行位置 */
.footer {
  color: pink;
}

但這樣還不是夠好，因為多出來的 .all-h1 不一定會用到，是多出來的。

因此，我們可以在繼承的類別名稱前面，加上「 % 」來將它合併起來。

%all-h1 /*建立繼承用的樣式*/
    font-size: 20px
    line-height: 1.8
    letter-spacing: 1px
.header h1
    @extend %all-h1
    color: #000
.content h1
    @extend %all-h1
    color: green
.footer
    @extend %all-h1
    color: pink

編譯後的結果也會和最上面的 CSS 一樣，首先於上方撰寫合併用的程式碼，也就是「%all-h1」。

「%」後面加上自己命名要合併樣式的名稱例如：

%all-class_name

再來在繼承用的 class 加上@extend 後面接%all-h2，編譯出來的程式碼便會將其合併。

所以往後寫 css 有樣式需要合併時，直接用@extend 的用法就可以輕鬆達成囉！

問題來了

究竟Mixin與extend的使用時機該如何抉擇？

基本上呢，

@mixin是將程式碼帶入到對應的 class 去，同時可帶入變數。

@extend則是藉由合併 class，並吃到共通樣式，但沒辦法帶入變數。

所以如果你的樣式都固定不變的，不會需要帶參數去改變樣式的話，

使用@extend，程式碼會比較少些。

但如果你的程式碼需要帶入多個變數進行運算時，那用@mixin 則較適合。

參考來源：sfisonly，30 天掌握 Sass 語法 - (7)利用 Sass「@extend」，讓你無痛合併 CSS 樣式