less学习（三）—关于变量

变量的作用就是把值定义在一个地方，然后在各处使用，这样能让代码更易维护。

1、普通变量用法

// Variables
@link-color:        #428bca; // sea blue
@link-color-hover:  darken(@link-color, 10%);

// 用法
a,
.link {
  color: @link-color;
}
a:hover {
  color: @link-color-hover;
}
.widget {
  color: #fff;
  background: @link-color;
}

2、变量也可以用在选择器名称上

@selector: color;
.@{selector}1 {
	color: #cf002d;
} 

编译为：

.color1 {
	color: #cf002d;
}

3、也可以作为URL地址来使用

// Variables
@images: "../img";

// 用法
body {
  color: #444;
  background: url("@{images}/white-sand.png");
}

4、用在import声明当中

// Variables
@themes: "../../src/themes";

// Usage
@import "@{themes}/tidal-wave.less";

5、也可以作为属性名称

@property: color;
.color1 {
	@{property}:#0ee;
	background-@{property}:#999;
}

编译为：

.color1 {
	color: #0ee;
	background-color: #999;
}

6、作为变量名

@fnord: 'I am fnord.';
@var: 'fnord';
content: @@var;

编译为：

content: 'I am fnord';

7、变量的延迟加载（Lazy Loading）

定义一次变量

@var: 1000px;
.lazy-eval {
	width: @var;
}

编译为：

.lazy-eval {
	width: 1000px;
}

如果一个变量定义两次

优先查询当前范围内变量，如果当前范围内没有变量，则逐级向上查找，如果某个范围内变量重复定义，则最后定义的变量将被使用
1、

@var: 1000px;
.lazy-eval {
	width: @var;
	@var: 200px;
}

编译为：

.lazy-eval {
	width: 200px;
}

2、

@var: 1000px;
.lazy-eval {
	width: @var;
}
@var: 200px;

编译为：

.lazy-eval {
	width: 200px;
}

3、

@var: 1000px;
.lazy-eval {
	width: @var;
	@var: 400px;
}
@var: 200px;

编译为：

.lazy-eval {
	width: 400px;
}

8、默认变量（default variables）

有时我们需要设置一些变量的默认值，然后导入less文件就可直接使用变量。默认变量的值很容易就会被覆盖，遵从css语法。

/*less文件*/
@base-color: green;
@dark-color: darken(@base-color, 10%);
/*使用*/
@import 'styless.less';
.color2 {
	width: 100px;
	height: 100px;
	background: @dark-color;
}
@base-color: red;

编译为：

.color2 {
	width: 100px;
	height: 100px;
	background: #cc0000;
}