iT邦幫忙

DAY 7
8

30天掌握Sass語法系列 第 7

30天掌握Sass語法 - (7)利用Sass「@extend」,讓你無痛合併CSS樣式

有的時候我們為了不要讓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了。
如下影片:
Yes

--

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

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

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

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


上一篇
30天掌握Sass語法 - (6)利用Sass「@mixin」,讓你省去重複撰寫相同CSS樣式的時間
下一篇
30天掌握Sass語法 - (8)Sass、Compass環境安裝流程教學
系列文
30天掌握Sass語法41

1 則留言

我要留言

立即登入留言