推 leizzzz: 感謝eight大的清楚解釋，大致了解了！ 12/09 14:10
→ leizzzz: 如您所說，IE9有規則數量限制，所以我才會盡量用extend 12/09 14:12
推 leizzzz: 用include的話，CSS則是太癡肥XD 12/09 14:17
※ 引述《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://www.ptt.cc/bbs/Web_Design/M.1417794784.A.6FF.html