※ 引述《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/cn.aspx?n=bbs/Web_Design/M.1417794784.A.6FF.html