iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 20
0
自我挑戰組

sass&css 30天學習日誌系列 第 20

SASS : extend繼承

sass中extend 是用來把css中重複的樣式作模組化,未來如要修改語法,只要改一次就能全部修改

以下是他的介紹:

新增extend內容

用a標籤作成按鈕為例,在sass中使用方法如下:

1. 增加extend名稱,格式使用「.」+名稱,裡面放重複的樣式

2. 在class或是id內的樣式放上@extend + extend名稱

結果如下圖,css編譯後會呈現

extend名稱+「,」+已套用的class或是id名稱,裡面內容放重複的樣式,也就是共用一份

https://ithelp.ithome.com.tw/upload/images/20200412/20107321NLV8gCjNwj.png

https://ithelp.ithome.com.tw/upload/images/20200412/20107321Iw8Bgf4Lij.png

網頁畫面

https://ithelp.ithome.com.tw/upload/images/20200412/20107321DUrH1DuVPF.png

修改extend內容

假設對extend內容最修改,他只要改一次就能修改全部樣式

https://ithelp.ithome.com.tw/upload/images/20200412/20107321ZHakInnaMc.png

網頁畫面

https://ithelp.ithome.com.tw/upload/images/20200412/20107321sKxEZXepFz.png

省略extend名稱

上圖的.a_btn的extend名稱是可被省略的,只要使用「%」取代「%」後面接著extend名稱,
編譯後的css就看不到extend名稱,只留套用的class或是id名稱

原因是:「%」是專門被繼承的樣式

https://ithelp.ithome.com.tw/upload/images/20200412/20107321A90IviFLMB.png

順序

如果把extend放在最下面,則css顯示就在最下方

https://ithelp.ithome.com.tw/upload/images/20200412/20107321rUT846z2Bi.png

一般建議都放在最上面,方便未來修改以及css權重問題

例如:如果有設定RWD在768平板大小,文字靠右

https://ithelp.ithome.com.tw/upload/images/20200412/20107321UCu5N6INrn.png

但是因為extend放在最下方,因此即使有設定RWD樣式,也會被覆蓋過去

https://ithelp.ithome.com.tw/upload/images/20200412/201073215jezmczuqO.png

把extend放在最上面

https://ithelp.ithome.com.tw/upload/images/20200412/20107321S6FHU0onGY.png

RWD 768平板大小就正常顯示靠右邊

https://ithelp.ithome.com.tw/upload/images/20200412/20107321j8DcX1Cxzd.png

@media與extend

在@media的extend不能繼承在外層的extend,會跳出如下圖的錯誤訊息:
參考文章:
https://lazamar.github.io/exdending-classes-within-media-queries-in-scss/

https://ithelp.ithome.com.tw/upload/images/20200412/201073213iy5MQFNXT.png

https://ithelp.ithome.com.tw/upload/images/20200412/20107321A5nD1ot3l8.png

解決方式:

1.extend放在@media內

這樣就可以繼承@media裡面的extend樣式

https://ithelp.ithome.com.tw/upload/images/20200412/20107321NlJzNfynWm.png

2.改用mixin

https://ithelp.ithome.com.tw/upload/images/20200412/20107321kvVoXgtlGL.png

文章取材來源: Alex 宅幹嘛 - 從 CSS 到 SASS (SCSS) 超入門觀念引導


上一篇
SASS : #{ } 插值
下一篇
SASS : Function 與 數值設定
系列文
sass&css 30天學習日誌30

尚未有邦友留言

立即登入留言