在选择器和参数混合中使用插值和转义,括号可获得所需的效果
动态变量** 由内插:在一个串,"@{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中将不再支持旧方法。