Less变量（2）

变量（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;
}