什么是 Mixin？
在 LESS 中，Mixin 是一种可复用且可组合的代码块，类似于函数或方法，它允许我们定义一些常用的样式，用于在不同的元素中添加相同的样式；或者更进一步地，允许我们将多个 Mixin 组合起来创建更复杂的效果。
Mixin 不同于 CSS 中的类选择器，它的作用仅限于生成样式。因此，它更像是一种 CSS 的预处理语言，通过 LESS 的编译器生成最终的 CSS 样式表。
如何定义 Mixin？
定义 Mixin 非常简单，只需要使用 @mixin 关键词，后面加上 Mixin 名称和一对大括号，然后在大括号中编写所需的样式，例如：
@mixin box-shadow {
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}上面的示例中，我们定义了一个名为 box-shadow 的 Mixin，它将为元素添加一个相同的阴影效果，在其中使用了两个相同的样式属性 -webkit-box-shadow 和 box-shadow。
如何使用 Mixin？
定义好 Mixin 后，我们需要将它应用到需要的元素上。在 LESS 中，可以使用 @include 关键词来调用 Mixin ，例如：
.box {
@include box-shadow;
}上面的示例中，我们定义了一个类名为 box 的元素，并通过 @include 将 box-shadow Mixin 应用到该元素上，从而为其添加阴影效果。
Mixin 的参数
Mixin 还支持传递参数来增强其可复用性和灵活性。在 Mixin 中，我们可以使用变量作为参数，并在调用时传递不同的值，例如：
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
border-radius: $radius;
}
.box {
@include border-radius(5px);
}上面的示例中，我们定义了一个带有 $radius 参数的 border-radius Mixin，然后在 .box 元素中调用该 Mixin，并传递了一个 5px 的参数。
Mixin 的组合
我们还可以将多个 Mixin 组合起来使用，来创建更复杂的效果。在 LESS 中，可以使用逗号 , 来将多个 Mixin 进行组合，例如：
-- -------------------- ---- -------
------ ----------------- ---------- -
------------------- ----- ----------
---------------- ----- ----------
-------------- ----- ----------
----------- ----- ----------
-
------ -------------------- ------- -
------------------ ------------------
-------------- ------------------
---------- ------------------
-
---- -
-------- ---------------------------- ------ ---------------- -----
-上面的示例中，我们定义了两个 Mixin，一个是 transition，用于实现过渡效果，另一个是 transform，用于实现 CSS3 的变换效果。然后在 .btn 元素中，我们使用了 @include 来将两个 Mixin 组合起来使用，从而实现了同时添加过渡效果和变换效果的效果。
总结
Mixin 是 LESS 中非常实用的功能，它可以让我们更快、更有效地添加样式，提高开发效率。在使用 Mixin 时，我们需要注意传递参数和组合 Mixin 的方式，以便实现更复杂和灵活的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65b4cec9add4f0e0ffdaa34e