@mixin/@include 混合指令

混合指令用于定义可重读的样式，避免了使用无语义的class；
可以通过参数功能引入变量，输出多样化的样式。

• @mixin 定义混合指令
• @include 引用混合指令

sass定义：
-------
@mixin large-text {
    font: {
        family: Arial;
        size: 20px;
        wight: bold;
    }
    color: #ff0000;
}

.page-title { 
    @include large-text;
    padding: 4px;
    margin-top: 2px;
}

CSS编译为：
--------
.page-title {
    font-family: Arial;
    font-size: 20px;
    font-weight: bold;
    color: #ff0000;
    padding: 4px;
    margin-top: 2px;
}

Arguments 参数用于混合指令中的样式设定变量，并且赋值使用。

在定义混合指令的时候，按照变量的格式，设置参数列表。引用的时候按照参数的顺序赋值。

sass
====================
------参数定义
@mixin sexy-border($color, $width) {
    border: {
        color: $color;
        width: $width;
        style: dashed;
    }
}

------可以设定默认值
@mixin sexy-border($color:blue, $width:lin) {
    border: {
        color: $color;
        width: $width;
        style: dashed;
    }
}

p {
    @include sexy-border(blue, lin);
}

css
====================
p {
    border-color: blue;
    border-width: lin;
    border-style: dashed;
}

参数变量 (Variable Arguments)

不能确定混合指令需要使用多少个参数，比如一个关于 box-shadow 的混合指令不能确定有多少个 shadow 会被用到。

数变量 … 声明（写在参数的最后方）告诉 Sass 将这些参数视为值列表处理。

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

css
============
.shadowed {
  box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}