※ 引述《leizzzz (嘰哩咕嚕稀哩嘩啦)》之銘言： : 想請教一下有使用sass版Bootstrap的前輩們~ : sass版本裡面有多一個mixins的資料夾 : 我知道它可以讓我們這樣寫: : div { : @include make-row(); : } : 但是這跟使用@extend的差別在哪裡呢？ : div { : @extend .row; : } : 生出來的CSS是不一樣，但是效果似乎沒差？ : 想請問一下，什麼情況要用mixin，什麼情況適合extend呢？ : 我目前都只有使用extend (因為字比較少XD) 我只用過 LESS，SASS 是否一樣我不清楚。 LESS 的 mixin 和 extend 寫法分別是 div { .make-row(); } div { &:extend(.row); } mixin 是引入 .make-row 的樣式到 div 中。 extend 是擴充 div 成 .make-row 的樣子。 所以兩者對於 scope 的行為才會剛好相反。 * global class 不能引入在 media query 內的 class * global class 可以擴充成 media query 內的 class * media query 可以引入 global class * media query 不能擴充成 global class 同樣地，在 mixin 內也不要使用 extend。 另外這兩者也常被當作 composite 和 extend。 假設我要建立一個 component，我可能會先建立一個 base-class 接著建立一些 sub-class，extend base-class， 最後在 sub-class 內加入不同的 mixin 調整樣式。 這個 component 的行為、element 可以定義在 base-class 中， 而其它的 sub-class 就負責樣式的部份。 （雖然 Bootstrap 是 base-class + modifier 的型式） base-class 定為名詞，mixin 定為動詞，也算是 naming convention。 mixin 還有另一個功能是當作函數使用。 根據傳入的變數決定要引入哪些值。 extend 也有另一個功能，用來減少檔案大小。 有些非常基本的 base-class，像 clearfix，也常被其它的 component extend 兩者分開用的時候是沒什麼差別，混用的時候就要注意一下是打算做什麼了。 然後 IE 還是 Chrome 好像有 Selector 的上限，這可能要查一下。 -- (*￣▽￣)/‧★*"`'*-.,_,.-*'`"*-.,_☆,.-*` http://i.imgur.com/oAd97.png --

※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 114.43.126.172 ※ 文章網址: http://webptt.com/m.aspx?n=bbs/Web_Design/M.1417794784.A.6FF.html