在撰寫 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 的用法就可以輕鬆達成囉!

問題來了

究竟Mixinextend的使用時機該如何抉擇?

基本上呢,

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

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

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

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

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

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