在 Less 中,变量的范围是由其定义的位置和作用域来确定的。Less 中主要有两种变量:全局变量和局部变量。

1. 全局变量:
全局变量是在样式表的任何地方定义的变量,且在整个样式表中都可见。
// 全局变量
@globalVariable: red;

body {
  color: @globalVariable; // 可以在任何地方访问全局变量
}

2. 局部变量:
局部变量是在一个选择器块或混合(Mixin)内部定义的变量,只在定义它的块或混合内部可见。
.my-mixin {
  // 局部变量
  @localVariable: blue;

  color: @localVariable; // 可以在本混合内访问局部变量
}

.my-element {
  // 无法访问 @localVariable,因为它是在另一个块内定义的
}

在 Less 中,变量的作用域是由其定义的位置所确定的。在混合内部定义的变量只能在该混合内部访问,而在选择器块内定义的变量只能在该块内部访问。

需要注意的是,如果在一个局部作用域内定义了与全局变量同名的变量,局部变量将会覆盖全局变量。
@color: red; // 全局变量

.my-mixin {
  @color: blue; // 局部变量,覆盖了全局变量
  background-color: @color; // 使用局部变量
}

.my-element {
  background-color: @color; // 使用全局变量
}

在上述例子中,.my-mixin 内部的 @color 覆盖了全局变量 @color。


转载请注明出处:http://www.zyzy.cn/article/detail/4285/Less