作者leizzzz (嘰哩咕嚕稀哩嘩啦)
看板Web_Design
標題[問題] sass-bootstrap的mixins?
時間Thu Dec 4 09:28:40 2014
想請教一下有使用sass版Bootstrap的前輩們~
sass版本裡面有多一個mixins的資料夾
我知道它可以讓我們這樣寫:
div {
@include make-row();
}
但是這跟使用@extend的差別在哪裡呢？
div {
@extend .row;
}
生出來的CSS是不一樣，但是效果似乎沒差？
想請問一下，什麼情況要用mixin，什麼情況適合extend呢？
我目前都只有使用extend (因為字比較少XD)
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 118.163.34.139
※ 文章網址: http://webptt.com/m.aspx?n=bbs/Web_Design/M.1417656523.A.F58.html
1F：推 ymcheung: 一個是叫設定好的 mixin，一個是讀入普通css class吧 12/04 10:32
謝謝樓上解答，我大概知道mixin跟extend怎麼使用，我平常自己也有寫一些mixins，只是好奇如果是Bootstrap的mixins，似乎用extend都可以替代？但如果這樣那些mixins又有什麼用處，不知道是否有一些我沒用到的好用功能？
※ 編輯: leizzzz (118.163.34.139), 12/04/2014 13:53:21
3F：推 EROS4: 在不同 media query 內只能用 @include 喔 12/05 12:20
4F：推 wretch1790: 印象中…mixin是類似可以帶參數進的function,extend就 12/05 20:55
5F：→ wretch1790: 很單純是繼承不會帶數,有誤誤打臉XD 12/05 20:55
6F：推 aspdoctor: 看一下他產生的css就能理解囉，一個把選取器加到extend 12/13 02:01
7F：→ aspdoctor: 後面，一個把樣式複製進來 12/13 02:01
8F：推 aspdoctor: 多用extend的目的就是同樣的東西不要重複多次去做，這 12/13 02:04
9F：→ aspdoctor: 樣code乾淨，也做到DRY的原則，讓別人覺得你css寫得很g 12/13 02:04
10F：→ aspdoctor: eek 12/13 02:04