定义和使用变量
在CSS中经常可以看到多次重复的相同值,在Less中通过使用变量避免相同值的重复。变量使代码的维护更加容易,修改值,只需在变量定义的地方一处修改就可以。
变量使用@
符号定义,使用冒号:
赋值。变量定义好后就可以在各处使用。
示例:
@color1: #ca428b;
.div1 {
background-color : @color1;
}
.div2 {
background-color : @color1;
}
变量插值
除了属性值,变量还可以在其他地方使用,比如选择器名称、属性名称、url和@import语句。在这些地方中引用变量,变量名必须放在以@符号为前缀的大括号({})中,例如:@{color1}
选择器名称中使用变量
选择器名称可以引用任何变量。
less 代码:
@selector: h2;
@{selector} {
background: #2ECCFA;
}
css 输出:
h2 {
background: #2ECCFA;
}
url中使用变量
变量可用于存储url。
less 代码:
@images: "https://www.qikegu.com";
.myclass {
background : url("@{images}/less/images/less_variables/birds.jpg");
width:800px;
height:500px;
}
编译后 css输出:
.myclass {
background: url("https://www.qikegu.com/less/images/less_variables/birds.jpg");
width: 800px;
height: 500px;
}
@import语句中使用变量
@import语句中可以用变量来保存路径,这在引用公共父目录时非常有用。
less 代码:
@path : "https://www.qikegu.com/less";
@import "@{path}/external.less";
.myclass {
color : #A52A2A;
}
external.less的内容:
.myclass {
background: #C0C0C0;
}
编译后的css输出:
body {
background: #C0C0C0;
}
p {
color: #A52A2A;
}
属性名中使用变量
在属性名中可以引用变量。
@my-property: color;
.myclass {
background-@{my-property}: #81F7D8;
}
编译后css输出:
.myclass {
background-color: #81F7D8;
}
变量名中引用变量
可以在变量名中引用变量。
less代码:
.myclass {
@col: #ca428b;
@color: "col";
background-color: @@color;
}
编译后css输出:
myclass {
background-color: #ca428b;
}
懒加载
懒加载允许,变量使用在前,变量声明在后。
less 代码:
p {
font-size: @a;
color: #ca428b;
}
@a: @b;
@b: 25px;
编译后css输出:
p {
font-size: 25px;
color: #ca428b;
}
覆盖变量值
多次定义变量值,后面的会覆盖前面的,本地的会覆盖上一级范围的。
less代码:
@color:#800080;
@color: #DDD;
h3 {
color: @color;
}
编译后css输出:
h3 {
color: #DDD;
}
变量作用域
变量作用域指定变量可用范围。编译时,编译器先从本地范围查找变量定义,如果没找到,编译器将到上一级范围查找,以此类推。
通常一个大括号内定义的变量是局部变量,作用域局限于大括号内。
less 代码:
@var: @a;
@a: 15px;
.myclass {
font-size: @var;
@a:20px;
color: green;
}
编译后 css 输出:
.myclass {
font-size: 20px;
color: green;
}