说我有三个单独的颜色方案，在网站的各种页面上使用。每种颜色具有定义的浅色，中等和黑色色调，并且颜色方案由体中的类定义。假设“红色”颜色方案是默认值。喜欢这个：
颜色定义：
@red-lt: #121; @red-md: #232; @red-dk: #343; @green-lt: #454; @green-md: #565; @green-dk: #676; @blue-lt: #787; @blue-md: #898; @blue-dk: #909;
基本默认样式示例
body { background-color: @red-dk;
#container { background-color: @red-md;
p { color: @red-dk; }
}
}
不同的配色方案样式示例
body.green { background-color: @green-dk;
#container { background-color: @green-md;
p { color: @green-dk; }
}
}
我想使用变量，所以我不必为每个方案重写所有的颜色变化，所以我可以这样写：
body.[color-var] { background-color: @[color-var]-dk;
#container { background-color: @[color-var]-md;
p { color: @[color-var]-dk; }
}
}
…但我不能包装我的头如何完成。帮帮我…？
解决方法
使用
interpolation和
escaping，选择器中的括号和
parametric mixins获得所需的效果：
>通过interpolation的动态变量：在字符串中，“@ {variable}”将替换为变量的值。它们也可以嵌套：给定@ {@ {var} -foo}和@var：bar，结果是“barfoo”。
结果值被引用。要删除这些引号，前缀〜。
>动态选择器by Selector interpolation：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之前)，请参阅解决方案的以前版本。对于旧方法的支持将在LESS 1.4.0中删除。
