Mixins
允许我们在项目中复用样式片段,可以传递参数这个特性使得它们非常灵活,强大。同样,我们也可以使用@extend
命令让一个选择器继承其它选择器去复用样式片段。有的时候Mixin
和extend
好像做了同样的事情,那我们应该选择哪一个呢?
向Mixin传递样式片段
除了传递参数,也可以直接传递一个样式片段给Mixin
。在Mixin
中,添加@content;
语句,然后传递的样式片段就会代替@content;
出现在相应的位置。
@mixin button {
font-size: 1em;
padding: 0.5em 1.0em;
text-decoration: none;
color: #fff;
@content;
}
.button-green {
@include button {
background: green
}
}
.button-green
中调用了Mixin
。@include
指令传递了一个将背景色设置为绿色的CSS片段,然后这个片段就会代替@content
语句出现在mixin
中相应的位置。
这段Sass被编译成:
.button-green {
font-size: 1em;
padding: 0.5em 1.0em;
text-decoration: none;
color: #fff;
background: green;
}
变量的作用域和内容片段
当一个内容片段传进mixin
的时候,它的作用域是在定义它的地方,而不是在mixin
里面。也就是说,传进去的内容片段不能使用在mixin
中定义的变量。
$color: green;
@mixin button($color: #fff) {
color: $color;
@content;
border: 1px solid $color;
}
.button-green {
@include button {background: $color;}
}
在这个例子中,在最外层和mixin
的参数中都有定义变量$color
。这两个变量分别有不同的色值。
在mixin
中,$color
变量的值是#fff
。在传递给.button-green
的内容片段中,$color
将会使用在最外层定义的green
值。
所以,上面的Sass会被编译成下面这段CSS
.button-green {
color: #fff;
background: green;
border: 1px solid #fff;
}
如何选择@mixin和@extend?
样式片段没有重复,这就是DRY
1. 使用@extend
产生 DRY CSS风格的代码。但是@mixin
就不能产生DRY式的代码。
2. @extend
会增加选择器之间的联系,然后把他们堆在一起。你正在为一些相关的元素设置样式,就拿一组按钮来说,使用@extend
让他们共享样式看起来合情合理。但是如果这些被复用的样式片段并不仅仅局限于相关的元素,那么使用@mixin
或许更好。
3. @mixin
主要的优势就是它能够接受参数。如果想传递参数,你会很自然地选择@mixin
而不是@extend
。
如果没有任何参数,使用@extend
来创造DRY应该是个不错的选择。不过要注意的是,使用gzip
压缩过的文件可能会破坏代码中的DRY。
4. 在大作数情况下@mixin
会比@extend
更好,但是它们俩都有自己的一席之地。当样式和选择器之间的关系在某些方面比较紧密的时候,使用@extend
。除此之外,你可以使用@mixin
在任何地方。