混合指令用于定义可重读的样式，避免了使用无语义的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;
}
