使用LESS CSS定义变量变量

在选择器和参数混合中使用插值和转义，括号可获得所需的效果

• 动态变量** 由内插：在一个串，

  "@{variable}"

  将被替换为变量的值。它们也可以嵌套：给定

  @{@{var}-foo}

  和

  @var: bar;

  ，结果为

  "barfoo"

  。 结果值被引用。要删除这些引号，请添加前缀

  ~

  。

• 通过选择器插值动态选择[器：

  body.@{var}

  变成

  body.bar

  。

例：

@red-md:   #232;@red-dk:   #343;.setColor(@color) {    body.@{color} { background-color: ~"@{@{color}-dk}";        #container { background-color: ~"@{@{color}-md}";         p { color: ~"@{@{color}-md}"; }      }    }}.setColor(~"red"); // Escape to prevent "red" turning "#FF0000"//.setColor(~"blue"); etc..

变成：

body.red {  background-color: #334433;}body.red #container {  background-color: #223322;}body.red #container p {  color: #223322;}

注意：最初编写答案时，选择器插值不存在。如果您正在使用旧的LESS编译器（在LESS 1.3.1a之前），请参阅上一版本的解决方案。在LESS1.4.0中将不再支持旧方法。