变量(variables)
1.普通的变量
由于变量只能定义一次,中途值是不变的,所以实际上他们就是“常量”
定义方式: @变量名: 值;
例子:
less中写法
@blue: #5B83AD;
#header {
color: @blue;
}
编译结果:
#header{
color: #5B83AD;
}
2.作为选择器和属性名的变量
使用方式:@{变量名}
例子:
less中写法
@mySelector: width;
.@{
mySelector}{
@{
mySelector}: 960px;
height:500px;
}
编译结果:
.width{
width:960px
height: 500px;
}
3.作为URL
使用方式: 变量值用双引号括起来,使用时以 @{变量名}
方式使用
例子:
less中写法
@myUrl: "http://www.test.com/static/images";
body{
background: #4cdca9 url("@{myUrl}/logo.png") no-repeat;
}
编译结果:
body{
background: #4cdca9 url("http://www.test.com/static/images/logo.png") no-repeat;
}
4.延迟加载
变量是延迟加载的,在使用前不一定要预先声明。
例子:
less中写法
.lazy-eval{
width:@var;
}
@var: @a;
@a: 9%;
编译结果:
.lazy-eval{
width:9%;
}
5.定义多个相同名称的变量时
在定义一个变量两次时,只会使用(同级或者上级目录找)离它最近的变量值,Less会从当前的作用域中向上搜索。这个行为类似于CSS的定义中始终使用最后定义的属性值。
例子:
less中写法
@var: 0;
.class {
@var: 1;
.brass{
@var: 2;
three: @var;
@var: 3;
}
one: @var;
}
编译结果:
.class {
one: 1;
}
.class .brass{
three: 3;
}