（1）当你的代码中需要用到大段大段重用样式代码的时候，可以通过 SCSS 的混 合器实现大段样式的重用。混合器使用@mixin 标识符定义。
示例：
SCSS 样式文件：（添加跨浏览器的圆角边框）
@minix rounded-corners{
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
可以使用@include 来使用这个混合器：
notice{
background-color:green;
border:2px solid #fff;
@include rounded-corners;
}
编译后的 css 样式：
.notice{
background-color:green;
border:2px solid #fff;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radiusL5px;
}
（2）使用混合器：
利用混合器，可以很容易地在样式表的不同地方共享样式。如果发现自己在不停地 重复一段样式，那就应该把这段代码构造成优良的混合器，尤其是这段样式本身就 是一个逻辑单元，比如说就是一组放在一起有意义的属性。
混合器中的 css 规则：混合器中不仅可以包含属性，也可以包含 css 规则，包含选 择器和选择器中的属性。
示例：
SCSS 样式文件：
@mixin no-bullets{
list-style:none;
li{
list-style-image:none;
list-style-type:none;
margin-left:0px;
}
}
通过@include 使用混合器
ul.plain{
color:#444;
@include no-bullets;
}
编译后的 css 样式：
ul.plain{
color:#444;
list-style:none;
}
ul.plain li{
list-style-image:none;
list-style-type:none;
margin-left:0px;
}
（3）给混合器传参：
混合器不一定总是生成相同的样式，可以通过@include 混合器时给混合器传参， 来指定混合器生成的精确样式。当@include 混合器时，参数其实就是可以赋值给 css 属性值的变量。
示例：
SCSS 样式文件：
@mixin link-colors($normal, $hover, $visited){
color: $normal;
&:hover{ color: $hover; }
&:visited{ color: $visited; }
}
通过@include 使用混合器时
a{
@include link-colors(blue, red, green);
}
编译后的 CSS 样式：
a{ color:blue; }
a:hover{ color:red; }
a:visited{ color: green; }
当你@include 混合器时，有时候可能会很难区分每个参数是什么意思，参数之间 是一个什么样的顺序。为了解决这个问题，SCSS 允许通过预付$name:value 的形式指 定每个参数的值。这是形式的传参，参数顺序就不必再在乎了，只需要保证没有漏掉参 数即可。
示例：
通过@include 使用混合器时
a{
@include link-colors{
$normal: blue,
$visited: green,
$hover: red
};
}
（4）默认参数值：
为了在@include 混合器时不必传入所有的参数，我们可以给参数指定一个默认值。 参数默认值使用$name:default-value 的声明形式，默认值可以是任何有效的 css 属性值，甚至是其他参数的引用。
示例：
SCSS 样式文件：
@mixin link-colors(
$normal,
$hover:$normal,
$visited:$normal;
)
{
color:$normal;
&:hover{ color:$hover; }
&:visited{ color:$visited; }
}
通过@include 使用混合器
a{
@include link-colors(red);
}
编译后的 css 样式：
a{ color: red; }
a:hover{ color:red; }
a:visited{ color:red; }
