SASS 是一种 CSS 预处理器，它引入了许多强大的功能，其中混合宏是实现代码复用的一种关键机制。
混合宏是一段可重用的样式代码集合，通过 @mixin 关键字定义，可以接受参数，并被其他 SASS 代码调用。使用混合宏可以让我们编写 DRY（Don't Repeat Yourself）的代码，避免在样式表中重复编写相同的代码。
混合宏的语法和用法
下面是一个简单的混合宏示例：
@mixin center {
display: flex;
justify-content: center;
align-items: center;
}这个混合宏定义了一个 center 功能，它将元素水平和垂直对齐。
在 SASS 中调用混合宏使用 @include 关键字，如下所示：
.box {
width: 200px;
height: 200px;
background-color: #f00;
@include center;
}上面的代码将 .box 元素指定为 200 × 200 的红色盒子，并将其居中对齐。在 @include 后面的圆括号中，我们可以传递参数，如下所示：
@mixin size($width, $height) {
width: $width;
height: $height;
}
.box {
@include size(200px, 200px);
}@mixin 关键字定义了 size 混合宏，该混合宏接受两个参数 $width 和 $height。在 @include 中，我们调用 size 混合宏，并为其传递了 200px 的宽度和高度。在这个示例中，我们将 .box 元素的大小设置为 200 × 200 像素。
混合宏的高级用法
混合宏是实现代码复用的一种非常强大的机制，除了上面介绍的基本用法，还有很多高级用法。
带默认参数的混合宏
SASS 2.0 引入了带有默认参数的混合宏，可以避免在调用混合宏时传递不必要的参数。例如：
@mixin size($width: auto, $height: auto) {
width: $width;
height: $height;
}
.box {
@include size(200px);
}在这个示例中，我们将 size 混合宏的 width 参数设置为 auto，height 参数也是如此。这意味着，如果我们在调用 size 混合宏时只传递一个参数，SASS 将使用 auto 作为第二个参数的默认值。在本示例中，我们将 .box 元素的宽度设置为 200px，高度将自动适应内容。
带变长参数的混合宏
有时候我们需要接受不定数量的参数，这时候可以使用带变长参数的混合宏。
-- -------------------- ---- -------
------ --------------- -
----- ----- -- ------ -
------ ---------- ---
------- ---------- ---
-
-
---- -
-------- ---------- ------ ----- -------
-在这个示例中，size 混合宏接受一个变长参数 $sizes，使用 nth 函数从参数中提取出宽度和高度，然后设置相应的样式。@each 循环用于遍历参数列表中的每个项目。在上面的示例中，我们将 .box 元素设置为两个不同的大小，分别为 200 × 200 像素和 300 × 300 像素。
混合宏的继承
和面向对象编程中的类一样，混合宏也可以继承。可以使用 @extend 关键字将一个混合宏继承到另一个混合宏中。
-- -------------------- ---- ------- ------ ------ - -------- ---- ----- ---------- ----- - ------------ - ------- -------- ----------------- ----- ------ ------ -
在这个示例中，我们定义了一个 button 混合宏，它包含了一些基础的按钮样式。然后，我们在 .btn-primary 类中使用 @extend 关键字将 button 混合宏继承进来， background-color 和 color 样式是 .btn-primary 自己的。
混合宏的作用域
在 SASS 中，混合宏的作用域和变量一样，是块级作用域。这意味着，在混合宏定义之外是无法访问混合宏内部的变量。
-- -------------------- ---- ------- ------ ------ - --------- ---- ----- -------- --------- - ---- - --------- --- ----- -------- ------- -
在这个示例中，我们定义了一个 button 混合宏，其中包含 $padding 变量。但是，在 .box 类内部，我们定义了一个名为 $padding 的变量，并向 button 混合宏传递该值。由于 SASS 中混合宏的作用域属于块级作用域， button 内部的 $padding 变量并不会受到影响。
总结
混合宏是实现代码复用的重要机制，可以避免在样式表中重复编写相同的代码。除了基本用法之外，我们还介绍了混合宏的高级用法，包括带默认参数的混合宏、带变长参数的混合宏、混合宏的继承以及混合宏的作用域。
使用混合宏可以提高代码的可读
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a25998add4f0e0ffa7a088