码完第一篇后才发现文本编辑器可以改成Markdown，试了下Markdown，才发现上一篇的排版真的好糟糕。本人也会努力将less官网的内容翻成中文，并且尽可能的讲清楚。希望能给想学less的前端新人带来一点收获吧，也能增强我自己的学习效果。以后可能会较频繁的对文章进行修改，努力写得更加浅显易懂。
概述
在你的样式表中一个值被重复使用多次的情况很常见：
.link{
color: #ff4e56;
}
.widget{
color: #fff;
background-color: #ff4e56;
}
变量可以使你的代码更容易维护，通过一个值来控制所有相同的值。
@color: #ff4e56;
.link{
color: @color;
}
.widget{
color: #fff;
background-color: @color;
}
变量插入
上面的例子实现了在css规则中使用变量来控制值，但是变量也可以使用在其他的地方，比如选择器的名字，属性的名字，URLs和@import 声明中
选择器(v1.4.0)
@selector: banner;
.@{selector}{
font-size: 16px;
color: #fff;
background-color: #ff4e56;
}
编译为：
.banner{
font-size: 16px;
color: #fff;
background-color: #ff4e56;
}
URLs
@imgUrl: ".../image";
.listImg{
background: url("@{imgUrl}/banner.png");
}
import 声明(v1.4.0)
语法：@import "@{themes}/test.less";
在v2.0.0之前，只有定义声明在根（root）或者当前作用范围内的变量才会被认定为变量，查找变量的时候只有会在当前文件和导入文件中查找。
@url: "../less";
@import "@{url}/test.less";
属性（v1.6.0）
@property: color;
.test{
@{property}: blue;
background-@{property}: #333;
}
编译为：
.test{
color: blue;
background-color: #333;
}
变量名
可以使用一个变量名去定义另外一个变量
@name: "hello world";
@var: "name";
content: @@var;
编译为：
content: "hello world";
延迟加载（lazy loading）
变量会延迟加载，不一定要在使用之前定义声明
有效的less代码：
.lazy-load{
width: @var;
}
@var: @a;
@a: 50%;
下面也是有效的代码：
.lazy-load{
width: @var;
@a: 50%;
}
@var: @a;
@a: 100%;
上面两部分代码均会编译成：
.lazy-load{
width: 50%;
}
当一个变量被定义声明了两次，最后一次定义声明的变量将会被使用，查找变量的时候从当前作用范围向上级搜索。这跟css本身最后一次被定义的属性将会被使用很相似。
@var: 0;
.class{
@var: 1;
.brass{
@var: 2;
three: @var;
@var: 3;
}
one: @var;
}
编译为：
.class{
one: 1;
}
.class .brass{
three: 3;
}
默认变量
有时候我们需要默认变量--是一种在变量还没定义好之前，定义一个变量。该功能不是必须的，因为可以很轻易的复写一个变量通过在所需的地方进行定义声明。
@base-color: green;
@import "test.less";
@base-color: red;
