变量（variable）允许我们单独定义一系列通用的样式，然后在需要的时候去调用/引用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了（即修改哪些全局变量的值即可）。
例如：将一个网站的主题，如背景颜色、字体颜色、字体大小等全部定义为变量，然后页面中其他地方引用这些变量即可。如果后面需要修改主题颜色，只需要修改这些变量。
Less 和其他编程语言类似，也支持定义变量，通过 @ 定义一个变量。语法如下：
/* 定义了一个变量 */ @color: #4D926F;
例子：
/* 定义了一个变量 */
@color: #4D926F;
#header {
/* 使用变量 color */
color: @color;
}
h2 {
background-color: @color;
}编译 less，输出的 CSS 如下：
/* 定义了一个变量 */
#header {
/* 使用变量 color */
color: #4D926F;
}
h2 {
background-color: #4D926F;
}甚至还可以用变量名定义为变量值，例子:
@fnord: "I am fnord.";
@var: 'fnord';
#header::before {
content: @@var;
}编译 less，输出的 CSS 如下：
#header::before {
content: "I am fnord.";
}注意：LESS 中的变量为完全的 ‘常量’ ，所以只能定义一次。
本文上面我们着重于使用 Less 变量来控制 CSS 规则中的值，但它们也可以用在其他地方，例如选择器名称、属性名称、URL 和 @import 语句。
使用 less 变量定义选择器名称，例子：
// 变量，header 选择器的名称
@my-selector: header;
// 使用变量
#@{my-selector} {
font-weight: bold;
line-height: 40px;
margin: 0 auto;
}编译 less，输出的 CSS 如下：
#header {
font-weight: bold;
line-height: 40px;
margin: 0 auto;
}使用 less 变量定义 URL 地址，例子：
// 定义变量
@images: "../img";
// 使用变量
body {
color: #444;
background: url("@{images}/white-sand.png");
}编译 less，输出的 CSS 如下：
body {
color: #444;
background: url("../img/white-sand.png");
}@import 指令用于在代码中导入其他 less 文件。它将 LESS 代码分布在不同的文件中，并允许轻松维护代码的结构。您可以将 @import 语句放在代码中的任何位置。
语法：@import "@{themes}/other.less";
请注意，在 v2.0.0 之前，仅考虑在根或当前作用域内声明的变量，并且在查找变量时仅考虑当前文件和调用文件。
例子：
// 定义变量
@themes: "common/less";
// 使用变量
@import "@{themes}/other.less";如果 other.less 文件存在，且内容如下：
#header {
background: #F0F0F0;
width: 100%;
}编译 less，输出的 CSS 如下：
#header {
background: #F0F0F0;
width: 100%;
}使用 less 变量定义 CSS 的属性名，例子：
// color 为 CSS 的颜色属性名
@property: color;
.widget {
@{property}: #0ee;
background-@{property}: #999;
}编译 less，输出的 CSS 如下：
.widget {
color: #0ee;
background-color: #999;
}less 允许变量在使用前不必声明。一个有效的 Less 片段：
.lazy-eval {
width: @var;
}
@var: @a;
@a: 9%;这也是有效的 Less：
.lazy-eval {
width: @var;
@a: 9%;
}
@var: @a;
@a: 100%;都编译成：
.lazy-eval {
width: 9%;
}注意：两次定义变量时，使用最后定义的变量，从当前作用域向上搜索。这类似于 css 本身，其中定义中的最后一个属性用于确定值。例子：
@fontSize: 10px;
.my1 {
@fontSize: 15px;
.my2 {
@fontSize: 20px;
font-size: @fontSize;
@fontSize: 18px;
}
font-size: @fontSize;
}编译 less，输出的 CSS 如下：
.my1 {
font-size: 15px;
}
.my1 .my2 {
font-size: 18px;
}本质上，每个作用域都有一个 "final" 值，类似于浏览器中的属性，就像这个使用自定义属性的例子：
.header {
@color: white;
color: var(@color); // the color is black
@color: black;
}编译 less，输出的 CSS 如下：
.header {
color: var(black);
}这意味着，与其他 CSS 预处理语言不同，Less 变量的行为与 CSS 非常相似。
变量可以用类似 ruby 和 php 的方式嵌入到字符串中，像 @{name} 这样的结构，例如：
@base-url: "http://assets.fnord.com";
#myDiv {
background-image: url("@{base-url}/images/bg.png");
}编译 Less，输出 CSS 如下：
#myDiv {
background-image: url("http://assets.fnord.com/images/bg.png");
}
川公网安备51010802032098