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