什么是 mixin
在 SASS 中，mixin 是一种语法结构，可以将一组相关的 CSS 属性集合封装到一个可重复使用的代码块中，然后在需要的地方调用这个 mixin。 mixin 使得 CSS 的可读性和可维护性大大提高。
下面是一个 mixin 的例子：
@mixin flexbox($direction: row, $justify: center, $align: center) {
display: flex;
flex-direction: $direction;
justify-content: $justify;
align-items: $align;
}上面的 mixin 定义了名为 "flexbox" 的代码块，其中包含了三个缺省值为 "row"、"center" 和 "center" 的参数。该 mixin 用于生成一个带有弹性盒子布局的元素。
在需要使用这个 mixin 的地方，可以像这样引用：
.header {
@include flexbox($direction: row-reverse, $justify: space-between, $align: flex-start);
}上面的代码会在 .header 元素上应用 flexbox mixin，该元素将以 "row-reverse" 为主轴方向，"space-between" 为主轴对齐方式，"flex-start" 为交叉轴对齐方式排列。
如何使用 mixin 实现高级功能
除了上述基本的 mixin 使用方法，SASS 中还有很多高级的 mixin 使用技巧。下面列举几个常见的用法。
1. mixin 的继承
在 SASS 中，mixin 之间可以实现继承关系，从而可以在已有的 mixin 基础上，进一步编写更为灵活的 mixin 代码块。
例如，有以下一组 mixin 代码：
-- -------------------- ---- -------
------ ---- -
-------------- ----
----------- - --- --- ----------------- - --- --- -----------------
-------- -----
----------------- ------
-
------ ----------- -
----------- -----
------ -
----------------- --------
------ ------
-------- --- -----
------- -----
-------------- ----
-
-如果需要在该组 mixin 基础上进一步封装一个具备更多细节控制的 mixin，可以使用 mixin 继承，如下所示：
-- -------------------- ---- -------
------ ---------- -
-- -- ---- -----
-------- -----
-- - ---- ---------
-- -
---------- -----
------ -----
-
-- -- ----------- -----
-------- ------------
-上述代码块定义了一个名为 "fancy-card" 的 mixin，它继承了 "card" 和 "card-action" 两个 mixin。使用时只需要在需要 fancy-card 造型的元素上引用即可。
2. mixin 的递归
有时候，一组 mixin 中可能存在递归的情况，这时可以使用带参的 mixin 递归调用。
例如，下面的代码定义了一个 mixin，用于生成连续的垂直滑块：
-- -------------------- ---- -------
------ ---------- -- -
------- ------
----------- --------- ---- -----
---------- --------------------- - ---------
------- -
---------- --------------------- - ------ - -------
-
--- -- - - -
-------- --------- - ---
-
-上述代码中使用了递归调用，如果 $n 大于 1，则再次调用自己，这样就可以生成有多个垂直滑块的样式。
3. mixin 的默认参数
在定义 mixin 时，可以通过默认参数的方式，大量减少重复的代码。
例如，为 border-radius 属性设置默认值：
@mixin border-radius($radius: 4px) {
border-radius: $radius;
}如果需要应用不同的 border-radius，可以通过更改参数值来实现：
.content {
@include border-radius(10px);
}
.btn {
@include border-radius(20px);
}总结
上面介绍了 SASS 中 mixin 的基本语法和一些高级用法。在实际项目中，通过 mixin 可以大大提高代码的可读性和可维护性，在编写复杂样式时也能大幅节省时间。初学者可以尝试使用 mixin 优化代码，并向更高级的用法逐步迈进。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ffba7995b1f8cacde07584