SASS 中的 @mixin 指令及其用法
SASS 是一种 CSS 预处理器，通过它我们可以使用一些更加高级的特性来编写 CSS。其中一个非常有用的特性就是 @mixin 指令。@mixin 指令允许我们定义一个代码块，然后在需要使用的地方调用它。这样，我们就可以减少代码量，同时也可以提高代码的可读性和可维护性。
@mixin 指令的语法
@mixin 指令的语法很简单，如下所示：
@mixin name {
// code ...
}其中，name 是 @mixin 的名称，可以是任意的合法的 CSS 选择器，code 是需要定义的代码块。
如何调用 @mixin
调用 @mixin 很简单，只需要使用 @include 指令即可，如下所示：
@include name;
其中，name 是需要调用的 mixin 的名称。
@mixin 的参数
@mixin 还支持参数，我们可以在定义时为 @mixin 指定参数，调用 @mixin 时传递对应的参数即可。参数使用 $ 符号来定义，如下所示：
@mixin name($param1, $param2, ...) {
// code ...
}参数的使用和普通变量一样，只需要在代码块中使用 $param1, $param2 即可。
例如，我们可以使用 @mixin 定义一个用于设置盒子阴影的样式，如下所示：
@mixin box-shadow($x, $y, $blur, $color) {
box-shadow: $x $y $blur $color;
}上述 @mixin 定义了四个参数 $x, $y, $blur, $color，分别表示阴影的位置、模糊半径和颜色。我们可以在需要设置阴影的地方调用这个 @mixin，如下所示：
.box-shadow {
@include box-shadow(0 2px 2px rgba(0, 0, 0, 0.2));
}上述代码就会调用 @mixin box-shadow，并为 $x, $y, $blur, $color 分别传递了 0, 2px, 2px, rgba(0, 0, 0, 0.2) 的值。
@mixin 的默认值
@mixin 还支持参数的默认值，我们可以在 @mixin 定义时为参数设置默认值，如下所示：
@mixin name($param1: default-value1, $param2: default-value2, ...) {
// code ...
}当我们调用 @mixin 时不传递相应参数的值时，使用的就是默认值。
例如，我们可以为上述的 box-shadow @mixin 设置默认值，如下所示：
@mixin box-shadow($x: 0, $y: 2px, $blur: 2px, $color: rgba(0, 0, 0, 0.2)) {
box-shadow: $x $y $blur $color;
}这样，当我们在调用 box-shadow @mixin 时不传递任何参数，就会使用默认值。
总结
@mixin 是 SASS 中非常有用的特性，通过它我们可以减少代码量，同时也可以提高代码的可读性和可维护性。在使用 @mixin 时，我们除了可以定义代码块外，还可以设置参数以及参数的默认值，以达到更加灵活的效果。掌握了 @mixin 的使用方法，可以让我们在前端开发中更加轻松地完成复杂的 CSS 样式效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e86e9af6b2d6eab33f7585