iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 22
0
自我挑戰組

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

SASS : extend與mixin差異

extend經常與mixin比較,是因為他們共通點是蒐集常用語法並模組化
mixin 介紹: https://ithelp.ithome.com.tw/articles/10193702
extend 介紹: https://ithelp.ithome.com.tw/articles/10204606

mixin的使用方式如下:

內容格式:

「@」+ mixin名稱 {css樣式}

引入方式:

@include +mixin名稱()

結果:

有引入的css中class或id裡面會有mixin樣式

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

extend 的使用方式如下:

內容格式:

「%」+ extend名稱 { css樣式 }

引入方式:

 依照編譯後的css是否顯示extend名稱而分:
 @extend + 「%」+extend名稱() //不顯示
 @extend + 「.」+extend名稱() // 顯示

結果:

css編譯後會另外新增已套用的class或是id名稱,並用逗號相隔,裡面內容放重複的樣式,也就是共用一份

https://ithelp.ithome.com.tw/upload/images/20200412/201073218HP9ljRooV.png

extend與mixin比較

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

從上面表格可得知,目前看來extend簡化css中比mixin較占優勢,但是mixin他除了模組化css,最常使用與控制指令(Control directives)搭配

Control Directives: @if、@for、@each、@while

參考文件:
http://sass-lang.com/documentation/file.SASS_REFERENCE.html#mixins
上面原文可用google翻譯,如下圖

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


上一篇
SASS : Function 與 數值設定
下一篇
SASS : extend、mixin與function應用
系列文
sass&css 30天學習日誌30

尚未有邦友留言

立即登入留言