LESS 变量的正确使用方法

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 中，变量的作用域有两种：

• 全局作用域
• 局部作用域

全局作用域

默认情况下，定义的变量在整个样式表中都有效。如果你在不同的标签中定义相同的变量，则后面定义的变量会覆盖前面的变量。

// javascriptcn.com 代码示例
@color: #333;

.header {
  background-color: @color;
}

.footer{
  color : @color;
}

局部作用域

如果你不想让变量在全局作用域中生效，可以将它定义在选择器、函数或混合（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