Scss:@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在任何地方。

文章转载自：https://blog.csdn.net/weixin_39987434/article/details/88419187