使用LESS CSS定义variablesvariables
假设我有三个单独的配色scheme，用在网站的各个页面上。 每种颜色都有一个明确，中等和黑暗的色调，颜色scheme是由一个class级在体内定义。 假设“红色”配色scheme是默认的。 喜欢这个：
颜色定义 ：
@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; } } }
不同的颜色scheme样式示例
body.green { background-color: @green-dk; #container { background-color: @green-md; p { color: @green-dk; } } }
我想使用variables，以便我不必为每个scheme重新编写所有的颜色变化，以便我可以写这样的东西：
body.[color-var] { background-color: @[color-var]-dk; #container { background-color: @[color-var]-md; p { color: @[color-var]-dk; } } }
…但我不能完全包围我的头如何做到这一点。 帮帮我…？
在select器和参数混合中使用插值和转义 ，括号来获得所需的效果：
- 通过插值 dynamicvariables ：在一个string中，
"@{variable}"被replace为variables的值。 它们也可以嵌套：Given@{@{var}-foo}和@var: bar;，结果是"barfoo"。
由此产生的价值被引用。 要删除这些引号，前缀~。 - 通过select器插值的 dynamicselect 器 ：
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; }
注意：答案最初写入时，select器插值不存在。 如果您正在使用旧的LESS编译器（在LESS 1.3.1a之前），请参阅以前版本的解决scheme。 对旧方法的支持将会在LESS 1.4.0中被删除。
如果这些值真的遵循这样一个可预测的格式，似乎是一个参数混合的完美情况：
减：
@red: #232; @green: #565; @blue: #898; .theme (@color) { background-color: @color - #111; #container { background-color: @color; p { color: @color + #111; } } } body.red { .theme(@red); }
编译CSS：
body.red{background-color:#112211;} body.red #container{background-color:#223322;} body.red #container p{color:#334433;}
我知道这个问题是相当古老的，但对于那些来到这个职位，我的答案也许可以帮助
我真的不知道你想用什么，但我的build议之一是基于@ScottS的答案。 在我的真实世界中，我需要创build一个networking应用程序，它会显示几个品牌，每个品牌都有自己的文本颜色，背景等…所以我开始追求一种方式来实现这个在LESS，我可以在SASS上轻松完成，结果如下：
减
// Code from Seven Phase Max // ............................................................ // .for .for(@i, @n) {.-each(@i)} .for(@n) when (isnumber(@n)) {.for(1, @n)} .for(@i, @n) when not (@i = @n) { .for((@i + (@n - @i) / abs(@n - @i)), @n); } // ............................................................ // .for-each .for(@array) when (default()) {.for-impl_(length(@array))} .for-impl_(@i) when (@i > 1) {.for-impl_((@i - 1))} .for-impl_(@i) {.-each(extract(@array, @i))} // Brands @dodge : "dodge"; @ford : "ford"; @chev : "chev"; // Colors @dodge-color : "#fff"; @ford-color : "#000"; @chev-color : "#ff0"; // Setting variables and escaping than @brands: ~"dodge" ~"ford" ~"chev"; // Define our variable .define(@var) { @brand-color: '@{var}-color'; } // Starting the mixin .color() { // Generating the loop to each brand .for(@brands); .-each(@name) { // After loop happens, it checks what brand is being called .define(@name); // When the brand is found, match the selector and color .brand-@{name} & { color: @@brand-color; } } } .carColor { .color(); }
结果将是：
CSS
.brand-dodge .carColor { color: "#fff"; } .brand-ford .carColor { color: "#000"; } .brand-chev .carColor { color: "#ff0"; }
这是非常棘手的，我不得不使用几个元素来获得我所需要的，首先使用了一个由Seven Phase Max提供的一组mixins，你可以在这里find它，而@ScottS的答案是从我的难题…希望这可以帮助你和其他需要创build一组variables作为另一个variables的一部分，并创build一个更dynamic的less文件。
您可以复制我的整个代码并在http://lesstester.com/上进行testing
据我所知，LESS不支持variables名称 。 你可以用更多的语义来重构你的声明：
/* declare palette */ @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; /* declare variables based on palette colors */ @lt: @red-lt; @md: @red-md; @dk: @red-dk; /* ...and only use them for main declarations */ body { background-color: @dk; #container { background-color: @md; p { color: @dk; } } }
这应该让你可以通过避免明确的颜色引用来非常轻松地在调色板之间切换。
尝试这个
@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; @color: 'red-lt'; div{ background: @@color; border: 1px solid lighten(@@color,20%); }
