LESS 是一种 CSS 预处理器，它为 CSS 添加了许多有用的功能，例如变量、嵌套、Mixin 等。其中，变量是 LESS 中的一个重要特性，它可以帮助我们更好地管理样式。在 LESS 中，我们可以定义全局变量，以便在整个样式表中使用。本文将介绍 LESS 中如何定义全局变量，并提供一些示例代码。
定义全局变量
在 LESS 中，我们可以使用 @ 符号来定义变量。要定义全局变量，我们需要在样式表的最上方定义它们，这样它们就可以在整个样式表中使用。
下面是一个简单的示例，它定义了两个全局变量：
@primary-color: #007bff; @secondary-color: #6c757d;
在这个示例中，@primary-color 和 @secondary-color 是两个全局变量，它们的值分别为 #007bff 和 #6c757d。接下来，我们可以在样式表的任何位置使用这些变量。
使用全局变量
要在 LESS 中使用全局变量，我们只需要使用 @ 符号加上变量名即可。例如，要在样式表中使用上面定义的 @primary-color 变量，我们可以这样写：
a {
color: @primary-color;
}在这个示例中，我们将 @primary-color 变量的值用作链接的颜色。
示例代码
下面是一个更完整的示例，它演示了如何使用 LESS 中的全局变量：
-- -------------------- ---- -------
--------------- --------
----------------- --------
---- -
----------------- -----------------
-
- -
------ ---------------
---------------- -----
------- -
---------------- ----------
-
-
---- -
----------------- ---------------
------ -----
-------- --- -----
-------------- ----
--------------- ----------
------------ -----
------- -
----------------- ---------------------- -----
-
-在这个示例中，我们定义了两个全局变量 @primary-color 和 @secondary-color，并在样式表中使用它们。body 元素的背景色使用了 @secondary-color 变量，链接的颜色使用了 @primary-color 变量。a 元素的 :hover 状态下文字的下划线颜色也使用了 @primary-color 变量。.btn 类使用了 @primary-color 变量作为背景色，并在 :hover 状态下使用了 LESS 的 darken() 函数来降低亮度。
总结
在 LESS 中定义全局变量可以帮助我们更好地管理样式，避免代码重复。在定义全局变量时，需要将它们放在样式表的最上方，以便在整个样式表中使用。在使用全局变量时，只需要使用 @ 符号加上变量名即可。希望本文对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65048de295b1f8cacd1323e7