使用 LESS CSS 定义变量变量
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11198221/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Defining Variable Variables using LESS CSS
提问by Kerri
Say I have three separate color schemes that are used on various pages in a site. Each color has a a light, medium and dark tint defined, and the color scheme is defined by a class in the body. Assume that the "red" color scheme is the default. Like this:
假设我在站点的各个页面上使用了三种不同的配色方案。每种颜色都定义了浅色、中色和深色，配色方案由主体中的类定义。假设“红色”配色方案是默认的。像这样：
Color Definitions:
颜色定义：
@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;
Basic Default Style Example
基本默认样式示例
body { background-color: @red-dk;
#container { background-color: @red-md;
p { color: @red-dk; }
}
}
Different Color Scheme Style Example
不同配色方案样式示例
body.green { background-color: @green-dk;
#container { background-color: @green-md;
p { color: @green-dk; }
}
}
I'd like to use variables so that I don't have to re-write all of the color variations for each scheme, so that I can just write something like this:
我想使用变量，这样我就不必为每个方案重新编写所有颜色变化，这样我就可以编写如下内容：
body.[color-var] { background-color: @[color-var]-dk;
#container { background-color: @[color-var]-md;
p { color: @[color-var]-dk; }
}
}
…but I can't quite wrap my head around how to accomplish that. Help…?
......但我无法完全理解如何实现这一点。帮助…？
回答by Rob W
Use interpolationand escaping, parentheses in the selector and parametric mixinsto get the desired effect:
- Dynamic variablesby interpolation: In a string,
"@{variable}"is replaced with the value of the variable. They can also be nested: Given@{@{var}-foo}and@var: bar;, the result is"barfoo".
The resulting value is quoted. To remove these quotes, prefix~. - Dynamic selectorsby Selector interpolation:
body.@{var}turns intobody.bar.
- 通过插值的动态变量：在字符串中，
"@{variable}"替换为变量的值。它们也可以嵌套：给定@{@{var}-foo}和@var: bar;，结果是"barfoo"。
结果值被引用。要删除这些引号，请添加前缀~. - 动态选择的选择插值：
body.@{var}轮流进入body.bar。
Example:
例子：
@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..
Turns into:
变成：
body.red {
background-color: #334433;
}
body.red #container {
background-color: #223322;
}
body.red #container p {
color: #223322;
}
Note: When the answer was originally written, selector interpolation did not exist. See the previous revision for the solution if you're working with an old LESS compiler (before LESS 1.3.1a). Support for the old method will be dropped in LESS 1.4.0.
注意：最初写答案时，选择器插值不存在。如果您使用的是旧的 LESS 编译器（LESS 1.3.1a 之前），请参阅解决方案的先前修订版。LESS 1.4.0 中将取消对旧方法的支持。
回答by steveax
If those values really follow a predictable format like that, seems like a perfect case for a parametric mixin:
如果这些值真的遵循这样的可预测格式，那么参数 mixin似乎是一个完美的例子：
Less:
较少的：
@red: #232;
@green: #565;
@blue: #898;
.theme (@color) {
background-color: @color - #111;
#container {
background-color: @color;
p { color: @color + #111; }
}
}
body.red {
.theme(@red);
}
Compiled CSS:
编译的CSS：
body.red{background-color:#112211;}
body.red #container{background-color:#223322;}
body.red #container p{color:#334433;}
回答by Paulo Griiettner
I know this question is pretty old, but for those that come to this post my answer maybe can help
我知道这个问题已经很老了，但对于那些来到这篇文章的人，我的回答可能会有所帮助
I`m not really sure for what you want to use this, but one of my suggestion is based on @ScottS answer. On my real world, I need to create a web app, where it would show several brands and each brand have their own text color, background and so on... so I started to chase a way to accomplish this in LESS, what I could easily do on SASS and the result is below:
我不确定你想用它做什么，但我的建议之一是基于@ScottS 的回答。在我的现实世界中，我需要创建一个 Web 应用程序，在其中显示多个品牌，每个品牌都有自己的文本颜色、背景等……所以我开始寻找一种在 LESS 中实现这一目标的方法，我的可以很容易地在 SASS 上做，结果如下：
LESS
较少的
// 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();
}
Te result will be:
结果将是：
CSS
CSS
.brand-dodge .carColor {
color: "#fff";
}
.brand-ford .carColor {
color: "#000";
}
.brand-chev .carColor {
color: "#ff0";
}
This is very tricky and I had to use several elements to get what I needed, first used a set of mixins provided by Seven Phase Max and you can find it hereand than, the @ScottS answer was the piece that was missing fro my puzzle... hope this helps you and others that need to create a set of Variables to be part of another variable and create a more dynamic less file.
这非常棘手，我不得不使用几个元素来获得我需要的东西，首先使用了 Seven Phase Max 提供的一组 mixin，你可以在这里找到它，然后，@ScottS 的答案是我的谜题中缺少的部分...希望这可以帮助您和其他需要创建一组变量以成为另一个变量的一部分并创建更动态的 less 文件的人。
You can copy my entire code and test at http://lesstester.com/
您可以复制我的整个代码并在http://lesstester.com/ 上进行测试
回答by user3155224
Try this
尝试这个
@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%);
}
回答by o.v.
To my knowledge, variable variable namesare not supported in LESS. You could however restructure your declarations in a more semantic manner:
据我所知，LESS 不支持变量变量名。但是，您可以以更具语义的方式重组您的声明：
/* 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; }
}
}
This should let you switch between palettes quite painlessly by avoiding explicit color references.
通过避免明确的颜色引用，这应该可以让您在调色板之间轻松切换。
