1. 何时使用混合器 2. 混合器中的css规则 ``` @mixin no-bulletes { list-style: none; li { list-style-image: none; list-style-type: none; margin-left: 0px; } } ul.plain { color: #444; @include no-bulletes; } ``` 最终生成如下代码： ``` ul.plain { color: #444; list-style: none; } ul.plain li { list-style-image: none; list-style-type: none; margin-left: 0px; } ``` 3. 给混合器传参（类似JavaScript的function） ``` @mixin link-colors($normal, $hover, $visited) { color: $normal; &:hover { color: $hover; } &:visited { color: $visited; } } a { @include link-colors(blue, green, yellow); } ``` 示例：封装一个三角 ``` @mixin trangle($local, $size, $deg) { &::#{$local} { display: block; content: ""; width: 0; height: 0; position: relative; border: $size solid #333 { left: { color: transparent; } right: { color: transparent; } top: { color: transparent; } } transform: rotate($deg); } } ``` 4. 默认参数值 ``` @mixin link-colors($normal, $hover:$normal, $visited:$normal) { color: $normal; &:hover { color: $hover; } &:visited { color: $visited; } } li { @include link-colors(red); } ```