LESS 是一种基于 CSS 的预处理器，它提供了许多有用的功能来简化 CSS 的编写和维护。其中比较常用的两个功能是继承（extend）和链接（import）。本文将详细介绍 LESS 中的继承与链接的用法和实现原理，帮助前端工程师更好地使用 LESS。
继承（extend）
继承是 LESS 中最强大的功能之一。它允许我们定义一个 CSS 选择器，并从其他选择器中继承样式规则。这样做的好处是可以减少 CSS 代码的重复，提高代码的可读性和可维护性。下面是一个例子：
-- -------------------- ---- ------- -- ------ -- ------ - ------ ----- ----------------- ----- - -- ------------- -- ----------------------- - ---------- ----- -
在这个例子中，我们定义了一个基本样式 .basic，然后创建了一个 .special 样式，用 :extend(.basic) 来继承 .basic 中的样式规则，并加上了自己的样式。
值得注意的是，当继承一个选择器时，所有继承自该选择器的规则都会被继承。如果不想全部继承，可以使用 when 关键字来对继承的规则进行过滤：
-- -------------------- ---- ------- -- ------ -- ------ - ------ ----- ----------------- ----- - -- ------------ -- ---------------------- --- ---- ----------- ------- - ---------- ----- -
在这个例子中，我们只继承了 .basic 中在 max-width: 768px 时生效的样式规则。
链接（import）
在 LESS 中，可以使用 @import 规则将一个 LESS 文件链接到另一个 LESS 文件中。这个功能可以使代码的组织更加有条理，并且便于代码的复用。下面是一个例子：
-- -------------------- ---- ------- -- --------- -- ------- ----------------- ------- --------------- -- -------------- -- -------------- ----- -- ------------ -- ------- - ------ -------------- ----------------- ----- -
在这个例子中，我们使用 @import 关键字将 variables.less 和 buttons.less 文件链接到 main.less 中。在 main.less 中，我们可以直接使用 variables.less 中定义的变量 @button-color 来设置 .button 的颜色。
需要注意的是，在 LESS 中，对不同文件中同名变量的处理方式是后面的覆盖前面的。如果你想让多个 LESS 文件中的同名变量生效，可以使用 @import (reference) 来链接文件，这样就不会覆盖之前定义的同名变量了。
总结
继承和链接是 LESS 中非常有用的两个功能，它们可以帮助我们写出更简洁、易维护的 CSS 代码。在使用这些功能时，我们要注意细节，如规则的过滤和同名变量的处理等，以免出现问题。希望本文能够对你了解 LESS 的继承和链接有所帮助，让你写出更好的前端代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646c0dc6968c7c53b0b1f214