Sass - 混入指令(@mixin)

前言

为了有效的维护和开发项目，代码的重复利用就显得尤为重要。在 Sass 中，除了 @import 和 @extend 可以使你的代码更加具有重复利用性，@mixin 指令也同样能提高你代码的重复使用率并简化你的代码。

@extend

@extend指令通过继承从而简化了代码，但是它的缺陷也尤为明显，首先是不够灵活，做重要的是它还会将你不需要的其他地方具有相同类名的样式都继承过来(继承来的类添加了其他规则)，但你要清楚，@extend指令有它自己的应用场景，并非一无是处，只不过在多样化且不重复的复用上，@mixin指令要优于它而已。

@mixin：

@mixin指令允许您定义可以在整个样式表中重复使用的样式，而避免了使用无语意的类（class），混入(@mixin)还可以包含所有的 CSS 规则，以及任何其他在 Sass 文档中被允许使用的东西，甚至可以携带 arguments，引入变量等，这就意味着只需少量的混入(@mixin)代码就能输出多样化且不重复的样式。

定义混入(@mixin)

混入通过 @mixin 类名 后面跟任选的arguments参数的方式定义一个 Mixins 模块，然后添加任何你想重复使用的样式：

/* 暂时不携带参数 */
@mixin public{
    width:50px;
    height:50px;
    background:red;
}

/* 引用 Mixins模块 */
div{
    @include public;
}

编译为CSS：

div {
  width: 50px;
  height: 50px;
  background: red; 
}

以上便是一个非常简单的混入(minxi)，你完全可以把混入看做一个模块(Mixins)，其中 @include 指令负责调用模块(Mixins)。

混入也还可以包含选择器和属性的混合体，选择器中甚至可以包含 parent references（父选择器）：

/* 混合体：选择器/嵌套属性/父选择器 */
@mixin public{
    &:hover{
        font:{
            family: '微软雅黑';
            size: 14px;
            weight: bold;  
        }
    }
    *{
        border-radius: 10px;
    }
}

/* 引用 Mixins模块 */
div{
    @include public;
}

编译为CSS：

div:hover {
  font-family: '微软雅黑';
  font-size: 14px;
  font-weight: bold; 
}

div * {
  border-radius: 10px; 
}

解释：在 public 模块中，首先使用了选择器(&)，接着使用嵌套属性语法，最后使用了父选择器(*)，这正如标题所说。

总结：@mixin 能够包含任何在 CSS 和 Sass 中有效的内容！

嵌套属性教程：https://blog.csdn.net/weixin_44198965/article/details/100986800

包含其他的混入

通过以上例子，我们知道使用 @include 指令可以将模块(Mixins)混入到文档中，那么可不可以在 @mixin 模块中使用 @include 指令将其他模块(Mixins)混入到其中组成大模块呢？

解释：你可以通过以包含多种简单 @mixin 模块的方式创建较为复杂的 @mixin大模块。

/* 模块 1 */
@mixin demo-1{
    width:50px;
}

/* 模块 2 */
@mixin demo-2{
    height:50px;
}

/* 模块 3 */
@mixin demo-3{
    background:rgb(255,0,0)
}

/* 合并模块 => Big */
@mixin Big{
    @include demo-1;
    @include demo-2;
    @include demo-3;
}

/* 调用大模块 => Big */
div{
    @include Big;
}

编译为CSS：

div {
  width: 50px;
  height: 50px;
  background: red; 
}

注意： 混入也可以包含自己，该行为不同于 Sass 3.3 之前的版本，以前混入递归是被禁止的，只定义后代选择器的混入可以安全地混入到文件的最顶层。

这就像造汽车，当你把每个零件都做出来的时候，拼接过程不会很难。

混入在文档的根

混入(@mixin)可以包含在任何规则的外(即，在文档的根)，前提是它们不直接定义的任何属性或使用任何父选择器引用：

/* 模块 */
@mixin demo{
    div{
        width:50px;
        height:50px;
        background:rgb(255,255,0);
    }
}

/* 文档根调用 */
@include demo;

拿如上代码来谈，如果没有 div 套着这些属性规则，就中了上面加粗文字【不直接定义的任何属性】这条规则，肯定就会报错，如果你还不理解为什么报错，请看下面。【不能使用任何父选择器】很好理解，不再赘述。

【不直接定义的任何属性】Error：

/* 模块 */
@mixin demo{
    width:50px;
    height:50px;
    background:rgb(255,255,0);
}

/* 文档根调用 */
@include demo;
// 报错

携带参数 (Arguments)

不难发现，前面所有例子从未携带过参数(Arguments)，我相信初学者已经感受到 Sass 的强大了。

当定义一个混入(@mixin)的时候，参数被作为变量名，写到混入(@mixin)名字后面的括号内，多个参数可以用逗号分隔，当调用混入的时候，值通过对应的参数顺序被传递。

解释：混入(@mixin)可以用 SassScript 值作为参数，给定的参数被包括在混入(@mixin)中并且作为为变量提供给混入(@mixin)使用。

/* 携带参数 */
@mixin demo($width,$height,$bg){
    width:$width;
    height:$height;
    background:$bg;
}

/* 调用 */
div{
    @include demo(50px,50px,rgb(255,0,0));/*传值*/
}

编译为CSS：

div {
  width: 50px;
  height: 50px;
  background: red; 
}

这与函数的思想非常相似，且这种方式的样式复用方法非常的强大，具体使用场景想必你脑海中一定浮现了！

同样可以使用普通的变量赋值语法为参数指定默认值，当调用混入时如果没有给参数赋值，则自动会使用默认值代替：

/* 携带参数 */
@mixin demo($width,$height,$bg:rgb(255,0,0)){
    width:$width;
    height:$height;
    background:$bg;
}

/* 调用 */
div{
    @include demo(50px,50px);/*省略颜色,使用默认值*/
}

编译为CSS：

div {
  width: 50px;
  height: 50px;
  background: red; 
}

background 没有传参，即为使用默认红颜色，很好理解。

需要注意的是，传参顺序不正确会导致报错：

/* 传参顺序不正确会导致报错 */
@mixin demo($width:50px,$height:50px,$bg){
    width: $width;
    height: $height;
    background: $bg;
}

/* 宽高使用默认值 / 颜色传入新值 */
div{
    @include demo(rgb(255,255,255));
}

Error：Required argument $bg must come before any optional arguments.，也就是说，参数 $bg 必须在任何可选参数之前。

关键字参数(Keyword Arguments)

混入(@mixin) 在 引入(@include) 的时候也可以使用明确的关键字参数，也就是说，你可以在传递值给mixin时将参数名称和参数值一并传递过去，请看下面这个例子：

/* 明确参数名称/参数值 */
@mixin demo($width,$height,$bg){
    width: $width;
    height: $height;
    background: $bg;
}

/* 调用 */
div{
    @include demo($width:20px,$height:20px,$bg:green)
}

你可以观察到，这样做不够简明，但是它可以使样式表更容易阅读，它给函数呈现了更加灵活的接口，它使多参数的混入更加容易调用。

Sass允许参数的位置顺序是可变的：

/* 明确参数名称/参数值 */
@mixin demo($width,$height,$bg){
    width: $width;
    height: $height;
    background: $bg;
}

/* 调用 */
div{
    @include demo($bg:green,$height:20px,$width:20px)/*顺序反转*/
}

也就是说，命名的参数可以按任何顺序进行传递，有默认值的参数可以省略。

可变参数(Variable Arguments)

有时候，我们不能确定一个 混入(@mixin) 或一个 函数(function) 需要使用多少个参数，对于这种情况，Sass 给出了 “可变参数” ，参数在声明 混入(@mixin) 或 函数(function) 结束的地方，所有剩余的参数打包成一个 列表(list) ，参数看起来就像普通参数一样，但后面跟随着 " … " 。

简单来说，可变参数可以接收多个未知的数量的参数。 例如，用于创建盒子阴影(box-shadow)的一个混入(mixin)可以采取任何数量的 box-shadow 作为参数：

@mixin box-shadow($shadows...) {
      -moz-box-shadow: $shadows;
      -webkit-box-shadow: $shadows;
      box-shadow: $shadows;
}

.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

编译为CSS：

.shadows {
  -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}

传递内容块到混入(Passing Content Blocks to a Mixin)

样式内容块可以传递到混入(@mixin)包含样式的位置，样式内容块将出现在混入内的任何 @content 指令的位置，这使得可以定义抽象与关联到选择器和指令的解析：

@mixin demo{
    @content;
}

@include demo{
    #div{
        padding:200px;
    }
}

编译为CSS：

#div {
  padding: 200px; 
}

注意： 当 @content 指令指定多次或在一个循环中指定的时候，样式块将在每次调用中被复制并引用。

变量的作用域和内容块(Variable Scope and Content Blocks)

传递给混入(@mixin)的内容块在其被定义的作用域中进行运算，而不是混入(@mixin)的作用域，这也就意味着混入(@mixin)的局部变量不能传递给样式块使用，并且变量将解析为全局值：

$color: rgb(0,0,0);

@mixin colors($color: blue) {/* @include => 不再@mixin作用域中进行运算 */
  background-color: $color;
    @content;
  border-color: $color;
}

.colors {
  @include colors { color: $color; }
}

编译为CSS：

.colors {
  /* @include => 不再@mixin作用域中进行运算 */
  background-color: blue;
  color: black;
  border-color: blue; 
}

可以看到，color 的颜色为黑色，证明 @include colors 没有在 @mixin 中进行运算，否则颜色应该为 blue 才对。