2.1.2 变量插值

不仅可以直接在属性值中使用变量，还可以用类似 @{name} 的结构，以“插值”的方式在选择器名、属性名、URL、import、媒体查询中使用变量。在编译时，变量将被替换为它们相应的值。

1）选择器名插值

Less选择器名称中可以引用任何变量。如：

@head: h;
.@{head}2 {
  font-size: 16px;
}

编译后的CSS代码为：

.h2 {
  font-size: 16px;
}

2）属性名插值

Less属性名称中可以引用任何变量。如：

@my-property: color;
.myclass {
  background-@{my-property}: #81F7D8;
}

编译后的CSS代码为：

.myclass {
  background-color: #81F7D8;
}

3）URL插值

变量还可以用来保存URL，并在 url() 中使用它。如：

@host: "http://www.baidu.com/";
h2 {
  color: @color;
  background: url("@{host}img/bg.png");
}

编译后的CSS代码为：

h2 {
  color: #f00;
  background: url("http://www.baidu.com/img/bg.png");
}

4）import插值

import语句中，可以使用保存路径的变量。如：

@host: "http://www.baidu.com/";
@import "@{host}/reset.less";

5）媒体查询插值

如果你希望在media query中使用Less变量，你可以直接使用普通的变量方式。因为“~”后面的值是不被编译的，所以可以用作media query的参数。如：

@singleQuery: ~"(max-width: 480px)";
@media screen, @singleQuery { 
    div { 
    width:2000px; 
    } 
} 

编译后的CSS代码为：

@media screen, (max-width: 480px) {
  div {
    width: 2000px;
  }
}