变量

在单一位置控制常用值。

### 概述

在你的样式表中，同一数值重复出现几十次甚至上百次的情况并不少见：

```less
a,
.link {
  color: #428bca;
}
.widget {
  color: #fff;
  background: #428bca;
}
```
变量为您提供了从单一位置控制这些值的方法，从而使您的代码更易于维护：

```less
// Variables
@link-color:        #428bca; // sea blue
@link-color-hover:  darken(@link-color, 10%);

// Usage
a,
.link {
  color: @link-color;
}
a:hover {
  color: @link-color-hover;
}
.widget {
  color: #fff;
  background: @link-color;
}
```
### 可变插值

上面的示例侧重于使用变量来控制 CSS 规则中的值，但它们也可用于其他地方，如选择器名称、属性名称、URL 和 `@import` 语句。

选择器
v1.4.0

```less
// Variables
@my-selector: banner;

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

```less
.banner {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}
```
### URLs
```less
// Variables
@images: "../img";

// Usage
body {
  color: #444;
  background: url("@{images}/white-sand.png");
}
```
### 导入声明
v1.4.0

语法：`@import "@{themes}/tidal-wave.less";`

请注意，在 v2.0.0 之前，只有在根或当前作用域中声明的变量才会被考虑，而且在查找变量时，只有当前文件和调用文件才会被考虑。

示例：

```less
// Variables
@themes: "../../src/themes";

// Usage
@import "@{themes}/tidal-wave.less";
```
### 属性
v1.6.0

```less
@property: color;

.widget {
  @{property}: #0ee;
  background-@{property}: #999;
}
```
编译为：

```less
.widget {
  color: #0ee;
  background-color: #999;
}
```
### 可变变量

在 Less 中，你可以使用另一个变量来定义变量名。

```less
@primary:  green;
@secondary: blue;

.section {
  @color: primary;

.element {
    color: @@color;
  }
}
```
编译为：

```less
.section .element {
  color: green;
}
```
### 延迟评估

变量在使用前无需声明。

有效的 Less 代码段：

```less
.lazy-eval {
  width: @var;
}

@var: @a;
@a: 9%;
```
这也是有效的：

```less
.lazy-eval {
  width: @var;
  @a: 9%;
}

@var: @a;
@a: 100%;
```
都编译成：

```less
.lazy-eval {
  width: 9%;
}
```
当两次定义一个变量时，将使用该变量的最后一次定义，并从当前作用域向上搜索。这与 css 本身类似，后者使用定义中的最后一个属性来确定值。

例如：

```less
@var: 0;
.class {
  @var: 1;
  .brass {
    @var: 2;
    three: @var;
    @var: 3;
  }
  one: @var;
}
```
Compiles to:

```less
.class {
  one: 1;
}
.class .brass {
  three: 3;
}
```
从本质上讲，每个作用域都有一个 "final" 值，类似于浏览器中的属性，就像这个使用自定义属性的示例一样：

```less
.header {
  --color: white;
  color: var(--color);  // the color is black
  --color: black;
}
```
这意味着，与其他 CSS 预处理语言不同，Less 变量的行为与 CSS 非常相似。

### 属性作为变量（新!）

v3.0.0

您可以使用 `$prop` 语法将属性像变量一样轻松处理。有时，这可以让你的代码更简洁。

```less
.widget {
  color: #efefef;
  background-color: $color;
}
```
Compiles to:

```less
.widget {
  color: #efefef;
  background-color: #efefef;
}
```
请注意，与变量一样，Less 也会选择当前/父作用域中的最后一个属性作为 "final" 值。

```less
.block {
  color: red;
  .inner {
    background-color: $color;
  }
  color: blue;
}
```
编译为：

```css
.block {
  color: red;
  color: blue;
}
.block .inner {
  background-color: blue;
}
```
### 默认变量

我们有时会收到关于默认变量的请求，即只有在尚未设置变量的情况下才能设置该变量。我们并不需要这项功能，因为只要在变量后面加上定义，就可以轻松覆盖变量。

例如：

```less
// library
@base-color: green;
@dark-color: darken(@base-color, 10%);

// use of library
@import "library.less";
@base-color: red;
```
由于 [延迟加载](http://www.bixiaguangnian.com/manual/less/1125.html#h3-u5EF6u8FDFu8BC4u4F30 "延迟加载")，这工作正常 - `@base-color` 被覆盖，`@dark-color` 为深红色。