LESS 是一种 CSS 预处理器，可以让我们使用变量、函数、嵌套等特性来简化 CSS 的编写。在 LESS 中，变量是一种非常有用的特性，可以让我们定义一些常用的颜色、字体、间距等值，并在整个样式表中重复使用。本文将介绍如何在 LESS 中使用变量。
定义变量
在 LESS 中定义变量非常简单，只需要使用 @ 符号加上变量名和值即可。例如，下面的代码定义了一个名为 primary-color 的变量，它的值为 #007bff：
@primary-color: #007bff;
使用变量
在 LESS 中使用变量也非常简单，只需要在需要使用的地方使用 @ 符号加上变量名即可。例如，下面的代码使用了上面定义的 primary-color 变量来设置链接的颜色：
a {
color: @primary-color;
}变量作用域
在 LESS 中，变量的作用域分为全局作用域和局部作用域。在 LESS 中定义变量时，如果不加任何修饰符，那么这个变量就是全局变量，可以在整个样式表中使用。如果在一个选择器内部定义变量，那么这个变量就是局部变量，只能在这个选择器内部使用。
例如，下面的代码定义了一个全局变量 primary-color 和一个局部变量 secondary-color：
-- -------------------- ---- ------- --------------- -------- ---- - ----------------- -------- ------ --------------- - - - ------ ----------------- -
在上面的代码中，primary-color 是全局变量，可以在 body 和 a 选择器内部使用，而 secondary-color 是局部变量，只能在 body 选择器内部使用。
变量插值
在 LESS 中，我们可以使用变量插值来动态生成变量名。变量插值使用 @{} 语法，可以将变量名嵌入到字符串中，生成一个新的变量名。
例如，下面的代码定义了两个变量 color 和 background-color，并使用变量插值来动态生成变量名：
@primary-color: #007bff;
.btn {
color: @primary-color;
@{&}-background: lighten(@primary-color, 10%);
}在上面的代码中，& 表示当前选择器的名称，因此 @{&}-background 就会被解析为 .btn-background，生成一个新的变量名。
示例代码
下面是一个简单的示例，演示了如何在 LESS 中使用变量：
-- -------------------- ---- ------- -- ---- --------------- -------- ----------------- -------- -- ---- ---- - ------ --------------- - - - ------ ----------------- - -- ---- ---- - ------ --------------- ---------------- ----------------------- ----- -
结论
使用 LESS 变量可以让我们更方便地管理样式表中的颜色、字体、间距等值，避免了在整个样式表中反复使用硬编码的值。在定义变量时，我们需要注意变量的作用域，以及如何使用变量插值动态生成变量名。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/673da7bcd58273b1617fd746