less-Variable Interpolation（变量插值）

1、选择器

编辑less：

// 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;
}

2、URL

编辑less：

// Variables
@images: "../img";

// Usage
body {
  color: #444;
  background: url("@{images}/white-sand.png");
}

输出css：

body {
  color: #444;
  background: url("../img/white-sand.png");
}

3、导入语句

编辑less：

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

// Usage
@import "@{themes}/tidal-wave.less";

4、属性

编辑less：

@property: color;

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

生成css：

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

5、变量名

编辑less：

@fnord:  "I am fnord.";
@var:    "fnord";

.contain:after{
  content: @@var;
}

生成css：

.contain:after {
  content: "I am fnord.";
}