LESS 可以让前端开发者更方便地管理 CSS 样式，其中变量是 LESS 中重要的概念之一。合理使用变量可以减少代码的冗余和维护成本，并提高代码复用性。
定义变量
在 LESS 中定义变量需要使用 @ 符号，如 @color: #333;。其中 color 为变量名，#333 为变量值。变量也可以定义为其他单位如像素(px)、em等。
@color: #333; @width: 100%; @font-size: 14px;
使用变量
使用变量时需要加上@符号。只需改变变量的值，所有调用该变量的样式都会跟着改变。
body {
background-color: @color;
width: @width;
font-size: @font-size;
}变量作用域
在 LESS 中，变量的作用域有两种：
- 全局作用域
- 局部作用域
全局作用域
默认情况下，定义的变量在整个样式表中都有效。如果你在不同的标签中定义相同的变量，则后面定义的变量会覆盖前面的变量。
-- -------------------- ---- ------- ------- ----- ------- - ----------------- ------- - -------- ----- - ------- -
局部作用域
如果你不想让变量在全局作用域中生效，可以将它定义在选择器、函数或混合（mixin）中。这样定义的变量只在当前作用域内有效。
.element {
@color: #333;
color: @color;
}变量插值
变量也可以嵌套在其他属性中，这需要使用“变量插值”语法 @{} 来实现。
.btn {
color: @color;
background-color: darken(@color, 10%);
&:hover {
color: @{color}-light; /* 变量串接 */
}
}常见错误
- 忘记加
@：在调用变量时，如果没有加上@符号，则 LESS 将无法识别其为变量。 - 定义时忘记分号：在定义变量时，如果没有加上分号
;，LESS 将会解析失败。
总结
使用 LESS 变量可以使样式表更加简洁、优雅，并提高代码复用性。正确的使用方法包括了定义变量、使用变量、变量作用域和变量插值等方面。当然，在使用过程中也需要注意常见错误以免出现不必要的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651b289495b1f8cacd2e063e