LESS 是一种 CSS 预处理器，目的是帮助开发者更快、更轻松地创建和维护 CSS 样式。其中一个 LESS 的关键特性就是 “引用规则”，即可以让开发者在样式表中轻松地重用和扩展已有的样式。在本篇文章中，我们将深入探讨 LESS 中的引用规则，并给出相关的示例代码和详细的解释。
变量的引用
LESS 可以使用变量来存储颜色、数值、字体等重复使用的样式值，然后在样式表中引用这些变量。引用一个变量只需要使用 @ 符号，后面加上变量名即可。
@primary-color: #007bff;
h1 {
color: @primary-color;
}上面的示例中，我们定义了一个 @primary-color 变量，并在 h1 元素中使用了它，这样我们就可以轻松地更改主色调，而不用修改每个使用该颜色的样式。
混合(Mixins)的引用
混合(mixins)是在 LESS 中定义可以重复使用的一组样式规则，我们可以使用 @mixin 关键字来定义一个混合。
-- -------------------- ---- ------- ------ --------------------------- ------ - ----------------- ------------------ ------- ------- ------- - ------- - -------- ----- -------------- ---- -------- ---------------------------- --------- ------ -------- -
在上面的示例中，我们定义了一个名为 gradient-background 的混合，并在 .button 元素中使用它。这个混合接受两个参数，$start 和 $stop，这是两个颜色，用于生成渐变背景。然后我们通过 @include 关键字将混合引入到 .button 元素的样式规则中。
属性集(Selector Sets)的引用
属性集(selector sets)是可以重复使用的一组样式规则，我们可以使用 & 符号来引用属性集中的选择器。
-- -------------------- ---- -------
------- -
-------- -----
-------------- ----
----------------- --------
------- -
----------------- --------
-
-在上面的示例中，我们定义了一个 .button 类选择器，并定义了一组样式规则。然后使用 & 符号，并在后面加上 :hover 为 .button:hover 设置了样式。这使得规则中的选择器更容易重复使用，特别是在嵌套的规则集中。
继承的引用
最后还有一个非常有用的引用规则就是继承。在 LESS 中，我们可以通过 @extend 关键字继承一个选择器的样式规则，从而避免代码冗余。
-- -------------------- ---- -------
------- -
-------- -----
-------------- ----
----------------- --------
------- -
---------- -----
-------- -----
------- --------
-
------- -
---------- -----
-------- ----
------- --------
-
-在上面的示例中，我们定义了 .button 类选择器，并定义了三个样式规则。然后，我们使用 & 符号为 .button 类指定 .large 和 .small 类，并在这两个选择器中使用了 @extend .button，这使得 .large 和 .small 类继承了 .button 类的全部样式规则。
总结
LESS 中的引用规则让我们可以轻松地复用和扩展已有的样式。我们可以通过变量、混合(mixins)、属性集(selector sets)和继承四种方式对样式进行引用。对于复杂的样式表，这些引用规则将极大地简化代码，并提高样式表的可维护性和可读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c078f99e06631ab9cc9b9b