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