在前端开发中，使用 CSS 预处理器可以极大地提高开发效率和代码可维护性。LESS 是其中一种广泛使用的 CSS 预处理器，它提供了许多方便的功能，其中 @mixins 是其中一个非常有用的功能。
什么是 @mixins？
@mixins 是 LESS 提供的一种代码复用机制，它类似于 CSS 中的 class 和 id，但它可以包含 CSS 属性、变量、样式等。使用 @mixins 可以避免编写重复的代码，并且在代码中遵循 DRY 原则（Don't Repeat Yourself）。
如何使用 @mixins？
使用 @mixins 非常简单。首先，我们需要定义一个 @mixins：
.my-mixin {
font-size: 14px;
color: #333;
}然后，我们可以在其他选择器中使用此 @mixins：
-- -------------------- ---- -------
------- -
-- -
----------
-
-
-------- -
-- -
----------
-
-- -
------------ -----
-
-在编译的 CSS 中，LESS 会将 .my-mixin 所包含的属性和值复制到选择器 .header h1 和 .sidebar ul 中，并将这些选择器的 CSS 编译为一个块。
除了通过类名引用 @mixins 之外，我们还可以在 @mixins 中使用参数，从而使其更加灵活。例如：
-- -------------------- ---- -------
--------- ------- ----- ------- ----- -
---------- ------
------ -------
-
------- -
-- -
--------------- ------
-
-
-------- -
-- -
----------------- ------
-
-- -
------------ -----
-
-在这个例子中，我们定义了 @mixins .my-mixin，它接受两个参数：@size 和 @color。在 .header h1 中，我们通过调用 .my-mixin(20px, #000) 这个带有参数的 @mixins，将其字体大小设置为 20px，字体颜色设置为黑色。在 .sidebar ul 中，我们只传递了一个参数 @color，将其颜色设置为红色。这样，我们就可以更加灵活地使用 @mixins。
总结
在 LESS 中使用 @mixins 可以极大地提高代码的可维护性和复用性。通过定义 @mixins 和使用参数，我们可以更加灵活地应用它们。因此，当我们在编写 CSS 时，应该优先考虑使用 @mixins，以避免编写重复的代码和提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a36ddbadd4f0e0ffb92735