前言
LESS 是一种 CSS 预处理器，它的出现让前端开发更加高效、简洁、易维护。其中，局部变量是 LESS 中最常用的功能之一，它可以让我们在 LESS 文件中定义变量，随时引用，优化了 CSS 样式的重用性和可读性。下面，本文将详解 LESS 中的局部变量的定义和使用，帮助前端工程师更好地运用。
定义局部变量
在 LESS 中，通过 @ 符号定义变量，且变量名必须以 @ 开头，例如：
@color: #f00;
上述代码中，我们定义了一个名为 @color 的局部变量，它的值为 #f00，也就是红色。在 LESS 中，我们可以定义各种类型的局部变量，例如颜色、字体大小、圆角等等。
使用局部变量
定义好局部变量后，我们可以在任何需要的地方使用，只需要简单地引用变量名即可，例如：
p {
color: @color;
}上述代码中，我们将之前定义的 @color 局部变量应用到了 color 属性中，这样所有 <p> 标签文本的颜色都将变成红色。
局部变量的作用域
在 LESS 中，局部变量的作用域很重要，它决定了变量在何处可以访问。局部变量的作用域通常有两种：
局部作用域
默认情况下，局部变量只在定义它的规则和邻近规则中可见，例如：
.class {
@color: #f00;
h2 {
color: @color;
}
}上述代码中，我们定义了一个名为 @color 的局部变量，在 .class 规则中可见，同时在邻近规则中（h2）也可见，因此 h2 中的文本颜色将是红色。
全局作用域
在 LESS 中，有时候我们需要定义一个全局变量，让它在整个文件中可见，此时我们需要使用 :global 关键字来定义，例如：
:global {
@font-size: 16px;
}上述代码中，我们使用 :global 定义了一个名为 @font-size 的全局变量，其字体大小为 16 像素，这个变量将在整个 LESS 文件中可见。
示例代码
下面给出一个完整的示例代码，它演示了 LESS 中局部变量的定义和使用：
-- -------------------- ---- -------
-- ------
----- -----
------ -----
-- ------
----------- -----
------------- ------ -----------
-- --------
--------------- ----
-- ------
---- -
----------------- -----
------ ------
---------- -----------
------------ -------------
-------------- ---------------
-- -------------
------- -
----------- -----
-
-
-- --------------
------- -
----------------- ------
------ -----
---------- -----------
------------ -------------
-------------- ---------------
-上述代码定义了一些局部变量，例如颜色、字体等等，同时定义了 .box 和 .button 两个规则，使用局部变量完成样式定义。
总结
本文详细介绍了 LESS 中局部变量的定义和使用，包括变量的作用域、全局变量的定义等。局部变量是 LESS 中非常常用的功能，它可以优化 CSS 样式的重用性和可读性，同时也可以降低样式表的维护难度。掌握局部变量的使用方法，可以让我们更好地开发高效、简洁、易维护的前端项目。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b3a2d148841e9894fe72df