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";// Usagebody {  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.";}