在本节中，我们将学习Sass中的mixing。Sass中的混合是通过@mixin指令定义的。混合允许我们定义可以在整个样式表中重复使用的样式，避免使用无意义的类。Mixin可以包含所有CSS规则和Sass文档中允许的任何其他内容。定义混合在Sass中，可以通过@mixin指令定义混合，后跟@mixin后跟混合名称和可选参数参数，以及混合内容块。示例：例如，创建一个名为my-text的mixin：@mixinmy-text{font-size:12px;颜色：#fdef92；font-weight:bold;}此时我们运行代码，上面的mixin不会被编译成CSS代码，只有使用这个mixin才会被编译。请注意，Sass连字符-与下划线_相同，这意味着my-text与my_text相同。混合使用定义好mix后，我们就可以在selector中使用mix了，可以通过@include来使用。@include调用将提取mixin中的所有样式并将它们放在调用@include的位置。例子：比如我们使用上面定义的mix：@mixinmy-text{font-size:12px;颜色：#fdef92；font-weight:bold;}p{@includemy_text();}编译成CSS代码:p{font-size:12px;颜色：#fdef92；font-weight:bold;}从上面的代码可以看出，选择器p中的所有样式属性都来自my-textmixer。除了使用样式属性外，mixin还可以包含选择器。当一个包含选择器的mixin通过@include包含在父选择器中时，mixin中的选择器最终会嵌套在父选择器中。例子：比如我们定义一个mixin，里面包含一个选择器.child，然后在另一个选择器中使用这个mixin：@mixinmy-text{font-size:12px;颜色：#fdef92；字体粗细：粗体；.child{背景颜色：#68f7f7;}}.other{@includemy_text();}编译成CSS代码：.other{font-size:12px;颜色：#fdef92；font-weight:bold;}.other.child{background-color:#68f7f7;}我们在.other选择器中调用了my-text，然后我们可以看到在编译后的CSS代码中，.child选择器成为了后代选择.other选择器设备。总结虽然混合很有用，但也不能乱用。大量复用可能会导致生成的样式表过大，导致加载缓慢。所以要注意混合使用场景。如果一段代码被频繁使用，那么可以将这段代码组合成一个mix。确定是否应将一组属性组合到混入中的经验法则是您是否可以为混入想出一个好名字。如果你能找到一个好的短名称来描述这些属性装饰的风格，你通常可以构建一个合适的mixin，否则mixin可能不合适。
