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;}