共计 1244 个字符，预计需要花费 4 分钟才能阅读完成。
本节咱们学习 Sass 中的混合，Sass 中的混合是通过 @mixin 指令来定义的，混合容许咱们定义能够在整个样式表中重复使用的款式，防止应用无语意的类。混合能够蕴含所有的 CSS 规定和任何其余在 Sass 文档中被容许应用的内容。
定义混合
Sass 中能够通过 @mixin 指令定义混合，@mixin 前面接混合的名称和可选的 arguments 参数，以及混合的内容块。
示例：
例如创立一个名为 my-text 的混合：
@mixin my-text {
font-size: 12px;
color: #fdef92;
font-weight: bold;
}此时咱们运行代码，上述混合是不会被编译到 CSS 代码中的，只有当咱们应用了这个混合时，才会被编译。
留神，Sass 的连贯符号 - 和下划线 _ 是雷同的，也就是说 my-text 与 my_text 是一样的。
混合的应用
混合定义好后，咱们就能够在选择器应用混合，能够通过 @include 来应用这混合。@include 调用会把混合器中的所有款式提取进去放在 @include 被调用的中央。
示例：
例如咱们应用下面定义好的混合：
@mixin my-text {
font-size: 12px;
color: #fdef92;
font-weight: bold;
}
p{@include my_text();
}编译成 CSS 代码：
p{
font-size: 12px;
color: #fdef92;
font-weight: bold;
} 从上述代码能够看出，在选择器 p 中的所有款式属性全副来自 my-text 这个混合器。
混合中除了应用款式属性，还能够蕴含选择器，当一个蕴含选择器的混合通过 @include 蕴含在一个父选择器中时，在混合中的选择器最终会被嵌套在父选择器中。
示例：
例如咱们定义一个混合，这个混合中蕴含一个选择器 .child，而后在另一个选择器中应用这个混合：
@mixin my-text {
font-size: 12px;
color: #fdef92;
font-weight: bold;
.child{background-color: #68f7f7;}
}
.other{@include my_text();
}编译成 CSS 代码：
.other {
font-size: 12px;
color: #fdef92;
font-weight: bold;
}
.other .child{background-color: #68f7f7;} 咱们在 .other 选择器中调用 my-text，而后能够看到在编译成的 CSS 代码中，.child 选择器变为了 .other 选择器的后辈选择器。
总结
尽管混合很好用，然而也不能乱用，大量的重用可能会导致生成的样式表过大，导致加载迟缓。所以咱们要留神混合的应用场景，如果一段代码应用的频率很高，那么就能够将这段代码形成一个混合。
判断一组属性是否应该组合成一个混合，一条教训法令就是你是否为这个混合想出一个好的名字。如果你能找到一个很好的短名字来形容这些属性润饰的款式，那么往往可能结构一个适合的混合器，反之这个混合可能并不适宜。