向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
-
使用@extend产生 DRY CSS风格的代码。但是@mixin就不能产生DRY式的代码。
-
@extend会增加选择器之间的联系,然后把他们堆在一起。你正在为一些相关的元素设置样式,就拿一组按钮来说,使用@extend让他们共享样式看起来合情合理。但是如果这些被复用的样式片段并不仅仅局限于相关的元素,那么使用@mixin或许更好。
-
@mixin主要的优势就是它能够接受参数。如果想传递参数,你会很自然地选择@mixin而不是@extend。
如果没有任何参数,使用@extend来创造DRY应该是个不错的选择。不过要注意的是,使用gzip压缩过的文件可能会破坏代码中的DRY。
- 在大作数情况下@mixin会比@extend更好,但是它们俩都有自己的一席之地。当样式和选择器之间的关系在某些方面比较紧密的时候,使用@extend。除此之外,你可以使用@mixin在任何地方。
文章转载自:https://blog.csdn.net/weixin_39987434/article/details/88419187