iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 19
1
自我挑戰組

網頁學習日誌系列 第 19

SASS : 巢狀結構

  • 分享至 

  • xImage
  •  

巢狀是SASS的特色之一,剛學SASS時會很常用它的語法,但過度使用會有問題,以下列出他的優缺點:

優點:可以把輸出的CSS做整理,很快就看出語法含意。

缺點:巢狀多層,CSS會變得很難維護,看的時候語意不清楚。

範例如下:

巢狀 1 ~ 2層:

https://ithelp.ithome.com.tw/upload/images/20200411/20107321Ql7odlYPNq.png

巢狀2層以上:

https://ithelp.ithome.com.tw/upload/images/20200411/20107321RSrR52VZ7p.png

把a 連結加入class名稱為btn,放在外層,結果如下:
https://ithelp.ithome.com.tw/upload/images/20200411/20107321gE00MHyxOp.png

上面多巢狀和把a連結放外面結果都是一樣的,網頁呈現如下:

https://ithelp.ithome.com.tw/upload/images/20200411/2010732171bqSa2ZYb.png

巢狀符號「&」:使用在「before」、「after」等偽元素 和 「hover」「active」等狀態

以上面的a連結(btn)來說,以往要寫hover事件都要寫「a:hover」,在此只要改寫成「&:hover」即可
,也就是說他就是「a連結」本體,只是把他換成「&」。


上一篇
SASS:維護CSS好幫手
下一篇
SASS : 安裝環境和基本操作
系列文
網頁學習日誌30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言