十、sass 混合指令@mixin

混合指令的用法是在 @mixin 后添加名称与样式，比如名为 large-text 的混合通过下面的代码定义：

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

.title{
    @include large-text;
    background-color: red;
}

编译后：

.title {
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  color: #ff0000;
  background-color: red; }

参数 (Arguments)

定义@mixin是可以传入参数：

@mixin transform($deg) {
    -webkit-transform: rotate($deg);
    -moz-transform: rotate($deg);
    -ms-transform: rotate($deg);
    -o-transform: rotate($deg);
    transform: rotate($deg);
}

.wrap {
    @include transform(45deg);
    width: 50px;
    height: 50px;
    background-color: red;
}

编译后：

.wrap {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  width: 50px;
  height: 50px;
  background-color: red; }

赋予默认值，混合指令也可以使用给变量赋值的方法给参数设定默认值，然后，当这个指令被引用的时候，如果没有给参数赋值，则自动使用默认值：

@mixin transform($deg:0deg) {
    -webkit-transform: rotate($deg);
    -moz-transform: rotate($deg);
    -ms-transform: rotate($deg);
    -o-transform: rotate($deg);
    transform: rotate($deg);
}

.wrap {
    @include transform();
    width: 50px;
    height: 50px;
    background-color: red;
}

编译后：

.wrap {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  width: 50px;
  height: 50px;
  background-color: red; }

关键词参数 (Keyword Arguments)

混合指令也可以使用关键词参数，上面的例子也可以写成：

p { @include sexy-border($color: blue); }
h1 { @include sexy-border($color: blue, $width: 2in); }

使用关键词参数的好处，如果使用默认值也可以省缺，是可以打乱顺序传参。

参数变量 (Variable Arguments)

有时，不能确定混合指令需要使用多少个参数，比如一个关于 box-shadow 的混合指令不能确定有多少个 'shadow' 会被用到。这时，可以使用参数变量 … 声明（写在参数的最后方）告诉 Sass 将这些参数视为值列表处理：

@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);
}

编译后

.shadowed {
  -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;
}