有的時候我們為了不要讓CSS太龐大，
所以有class用到相同樣式時，
都會將其合併起來，
如下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;
}
/* 第4000行位置 */ 
.footer {
  color: pink;
}

但這樣子會有個麻煩的地方是，
假設合併樣式程式碼的位置在第200行，
而我目前所在位置是在4640行，
當我又需要合併樣式時，
就又必須用滾輪會調卷軸到第200行來合併class樣式，
所以當程式碼越變變多時，
要集中相同樣式的工作流程相對也會變得更加繁瑣，

所幸Sass ＠extend可以解決這樣的問題。
有的時候我們為了不要讓CSS太龐大，
所以有class用到相同樣式時，
都會將其合併起來，
如下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;
}
/* 第4000行位置 */ 
.footer {
  color: pink;
}

但這樣子會有個麻煩的地方是，
假設合併樣式程式碼的位置在第200行，
而我目前所在位置是在4640行，
當我又需要合併樣式時，
就又必須用滾輪會調卷軸到第200行來合併class樣式，
所以當程式碼越變變多時，
要集中相同樣式的工作流程相對也會變得更加繁瑣，

所幸Sass ＠extend可以解決這樣的問題。
如果是用Sass來寫的話，
則就會變成這樣子：

%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-h2」，「%」後面加上自己命名要合併樣式的名稱，
再來在繼承用的class加上@extend後面接%all-h2，
編譯出來的程式碼便會將其合併，
所以往後寫css時，就不用像傳統的寫法那麼繁瑣，
以後我有樣式要合併時，就直接用@extend的用法就好，
就不用再跑上跑下的編輯CSS了。
如下影片：

--

或許有人會開始思考，
究竟Mixin與extend的使用時機該如何抉擇？
基本上來說，
@mixin是將程式碼帶入到對應的class去，同時可帶入變數。
@extend則是藉由class合併，並吃到共通樣式，但沒辦法帶入變數。

所以如果你的樣式都固定不變的，
不會需要用參數帶進去改變樣式的話，
那就用@extend，程式碼會比較少些。

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

以下錄製的範例影片則提供給各位參考，
來加深大家的印象：