在 LESS 中使用 @import 导入不同的 LESS 文件常常是必要的，但是如果导入的文件中有很多相同的样式代码，这会导致代码重复，增加了文件大小，降低了性能。好在 LESS 提供了几种解决重复代码的方法，让我们来详细了解一下。
##方法一：使用 mixin
Mixin 是 LESS 中的一个特性，它是将一组样式定义在一个函数中，然后通过函数名在需要的地方调用。通过 mixin，我们可以避免重复的定义相同的代码。
例如，我们定义了一个包含属性值的 mixin：
-- -------------------- ---- -------
------- -
--------------- -
----------- -------
---------- -----
-------- ---- -----
-------------- ----
------- --- ----- -----
------- -
----------------- --------
-
-
-现在，我们在另一个文件中使用 import 导入 .button，并调用 .button-basic() mixin：
@import "button.less";
.my-button {
.button-basic();
}这样，我们就避免了重复定义 .button-basic()，同时可以在多个地方调用它。
##方法二：使用 extend
Extend 是 LESS 中另一个重要的特性，它允许我们将一个选择器的样式继承到另一个选择器中，避免了重复定义相同的样式。
例如，我们定义了一个包含属性值的选择器：
-- -------------------- ---- -------
------------- -
----------- -------
---------- -----
-------- ---- -----
-------------- ----
------- --- ----- -----
------- -
----------------- --------
-
-现在，我们在另一个文件中使用 import 导入 .button-basic，并使用 extend 继承它：
@import "button.less";
.my-button {
&:extend(.button-basic);
}这样，我们就避免了重复定义 .button-basic，同时可以在多个地方继承它。需要注意的是，Extend 有时可能会导致样式层级结构混乱，建议仅用于相近且简单的样式。
##方法三：重构代码
重构代码是最根本的解决方法。当我们发现多个文件中存在相同的样式代码时，建议将它们提取到一个共用的 LESS 文件中，然后在需要的地方使用 import 导入即可。
例如，我们将所有按钮样式都提取到一个名为 button.less 的文件中：
-- -------------------- ---- -------
-- -----------
------------- -
----------- -------
---------- -----
-------- ---- -----
-------------- ----
------- --- ----- -----
------- -
----------------- --------
-
-
--------------- -
------ ------
----------------- -----
------- -
----------------- ---------
-
-
--------------- -
------ ------
----------------- ------
------- -
----------------- ----------
-
-
-- ---
-- --
------- --------------
---------- -
------------------------
-
--------------- -
--------------------------
-
--------------- -
--------------------------
-这样，我们就避免了重复定义相同的样式代码，同时可以在多个地方使用它们。
总结
在 LESS 中，避免代码重复是很重要的，因为它不仅可以减少代码量，还可以提高性能，避免出错。我们介绍了三种解决重复代码的方法：使用 mixin、使用 extend 和重构代码。这些方法可以使我们的代码更简洁、更易维护，无论是日常开发还是大型项目，都有很大的帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64adf45748841e98949e8ef6