LESS 允许开发者自定义变量，变量可以在全局样式中使用，变量使得样式修改起来更加简单。

Less中有各种各样的变量.

根据使用的场景不同,可以分以下几种:

1. 质变量

2. 字符串变量

3. 选择器变量

4. 属性名变量

一. 值变量

把属性值存储在变量中.

less内容：

@border-color : #b5bcc7; /* 定义一个变量，变量名必须以@开头*/

.div{
    border : 1px solid @border-color;
}

css内容：

.mythemes{
    border: 1px solid #b5bcc7;
}

说明：

如果对同一个变量定义两次的话，在当前作用域中最后一次定义的将被使用。这与CSS的机制类似，最后一次定义的值会成为这个属性的值。

变量是“按需加载”（lazyloaded）的，因此不必强制在使用之前声明。

二. 字符串插入变量

// 定义变量
@images: "../img";

// 在字符串中使用变量
body {
    color: #444;
    background: url("@{images}/white-sand.png");
}
div{
    background: url("@{images}/1.png");
}

编译成css:

@charset "utf-8";
body {
  color: #444;
  background: url("../img/white-sand.png");
}
div {
  background: url("../img/1.png");
}

三. 选择器插入变量

// Variables
@my-selector: banner;

// Usage
.@{my-selector} {
    font-weight: bold;
    line-height: 40px;
    margin: 0 auto;
}

编译成css:

.banner {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}

四. 属性名插入变量

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

编译成css:

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

五. 属性名作为变量

.widget {
  color: #efefef;
  background-color: $color;  // 属性名当做变量使用
}

编译成css:

.widget {
  color: #efefef;
  background-color: #efefef;
}