引言
LESS 是一种 CSS 预处理器，能够大大简化前端开发过程中对 CSS 的处理和管理。其中一个重要的功能就是 mixin（混合）
mixin 概述
Mixin 是 LESS 提供的一种在样式表中定义可重用的代码块的方式。通过 mixin 可以让开发人员轻松地将相同的样式应用于不同的选择器组，简化了样式表的编写和维护。同时，mixin 还可搭配参数，让样式表块更具有灵活性。
mixin 定义语法
在 LESS 中，使用 @mixin 关键字来定义 mixin，语法格式如下：
@mixin mixin-name {
// mixin 定义体
}其中，mixin-name 为自定义的 mixin 名称，定义体一般是一些 CSS 属性或者选择器的组合。
mixin 参数
mixin 还提供了参数功能，在 mixin 定义时可以接受传入的参数，使用时传入不同的值即可生成对应样式。
@mixin border-radius($radius) {
border-radius: $radius;
}实际应用：
.element {
@include border-radius(4px);
}上述 mixin 就会渲染为以下样式：
.element {
border-radius: 4px;
}mixin 的继承
除了参数功能，mixin 还可以通过继承来提高重用性。在定义 mixin 时，使用 .class 语法来定义一个选择器，这个选择器可以在其他定义中被继承。如下：
.menu { font-size: 12px; }
a:extend(.menu) { /* styles */ }上述例子中，a 元素继承了 .menu 的 font-size 样式。
示例
下面是一段使用 mixin 定义按钮样式的 LESS 代码：
-- -------------------- ---- -------
---- -
-------- -------------
-------- ---- -----
----------- -----
---------- -----
------------ -----
----------- -------
---------------- -----
-------------- ----
------- -----
------- --------
------ -----
----------------- --------
------- -
----------------- --------
-
-可以看到，该样式定义重复出现在其他按钮上，比较冗余。为提高重用性，我们可将其定义为 mixin。如下：
-- -------------------- ---- -------
------------------ ----- -------- ----- -
-------- -------------
-------- ---- -----
----------- -----
---------- -----
------------ -----
----------- -------
---------------- -----
-------------- ----
------- -----
------- --------
------ -----
----------------- --------
------- -
----------------- --------
-
------ -------
------- --------
-然后，我们就可以在按钮样式中通过 @include 引用 mixin，从而达到复用该样式的目的：
.primary {
@include .btn-mixin;
}该样式会渲染为以下 CSS：
-- -------------------- ---- -------
-------- -
-------- -------------
-------- ---- -----
----------- -----
---------- -----
------------ -----
----------- -------
---------------- -----
-------------- ----
------- -----
------- --------
------ -----
----------------- --------
-
-------------- -
----------------- --------
-同时，我们也可以通过传入参数的方式自定义按钮宽高：
.success {
@include .btn-mixin(100px, 40px);
}渲染为以下样式：
-- -------------------- ---- -------
-------- -
-------- -------------
-------- ---- -----
----------- -----
---------- -----
------------ -----
----------- -------
---------------- -----
-------------- ----
------- -----
------- --------
------ -----
----------------- --------
------ ------
------- -----
-
-------------- -
----------------- --------
-总结
使用 mixin 可以大幅提高 LESS 的重用性和开发效率。本文介绍了 mixin 的定义、参数传递以及继承的语法规则，并通过实例演示了如何定义和使用 mixin 进行样式组合。在实际的开发中，我们可以按照以上方法，将重复且固定的样式定义为 mixin，达到代码复用的目的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647591d2968c7c53b02968bf