@mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式。
@include 指令可以将混入（mixin）引入到文档中。
定义一个混入
混入(mixin)通过 @mixin 指令来定义。 @mixin name { property: value; property: value; ... }
/* 创建一个名为 "important-text" 的混入 */
@mixin important-text {
color: red;
font-size: 25px;
font-weight: bold;
border: 1px solid blue;
}
注意：Sass 的连接符号 - 与下划线符号 _ 是相同的，也就是 @mixin important-text { } 与 @mixin important_text { } 是一样的混入。
使用混入
@include 指令
/* 使用混入 */
selector {
@include mixin-name;
}
例：
/* 将important-text混入 */
.danger {
@include important-text;
background-color: green;
}
// 转化为CSS ==>
.danger {
color: red;
font-size: 25px;
font-weight: bold;
border: 1px solid blue;
background-color: green;
}
混入中也可以包含混入
@mixin special-text {
@include important-text;
@include link;
@include special-border;
}
向混入传递变量
可变参数
有时，不能确定一个混入（mixin）或者一个函数（function）使用多少个参数，这时我们就可以使用 ... 来设置可变参数。
可变参数
浏览器前缀使用混入
上一篇：4.Sass @import与Partials >>
下一篇：6.Sass @extend 与 继承 >>
