变量的作用就是把值定义在一个地方,然后在各处使用,这样能让代码更易维护。
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;
}