创建并使用 mixin
要创建 mixin,请使用 @mixin 指令。
@mixin default-box ($color, $borderColor) {
color: $color;
border: 1px solid $borderColor;
clear: both;
display: block;
margin: 5px 0;
padding: 5px 10px;
}
你可以在 mixin 的名称后面的括号内指定参数列表。记得用 $ 开始你的变量并用逗号分隔它们。
要在另一个选择器中使用 mixin,请使用 @include 指令。
footer, header{ @include default-box (#ddd, #ccc); }
mixin 中的样式现在将用于 footer 和 header,其中 #ccc 为 $color 变量,#ddd 为 $borderColor 变量。