使用LESS CSS定义变量变量 [英] Defining Variable Variables using LESS CSS

问题描述

说我有三种不同的颜色方案，在网站的各种网页上使用。每种颜色都有一个浅色，中等和黑色的色调定义，颜色方案由一个类在体内定义。假设红色颜色方案是默认值。像这样：

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:

颜色定义：

@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; }
  }
}

strong>

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…?

推荐答案

使用插值和转义，选择器中的括号和 parametric mixins 以获得所需的效果：

Use interpolation and escaping, parentheses in the selector and parametric mixins to get the desired effect:

• 动态变量 href =http://lesscss.org/#-string-interpolation>插值：在字符串中，@ {variable}被替换为变量的值。它们也可以嵌套：给定 @ {@ {var} -foo} 和 @var：bar; 结果为barfoo。
  
  生成的值被引用。要删除这些引号，请通过 前缀〜。


• /lesscss.org/#-selector-interpolation\">选择内插： body。@ {var} 变成 body.bar 。

• Dynamic variables by 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 selectors by Selector interpolation: body.@{var} turns into 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中删除。

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 CSS定义变量变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！