基于祖先类的LessCss动态变量 [英] LessCss dynamic variables based on ancestor class
问题描述
我有一个页面模板，该模板在body元素上具有一个烙印类:
I have a page template which has a branding class on the body element:
<body class="brand-africa">
<h1>Africa</h1>
</body>
使用以下Less，我可以将变量用于品牌颜色并将其应用于CSS选择器的color:
Using the following Less, I can use a variable for the brand colour and apply it to the color of a CSS selector:
@brand-default: #649d84;
@brand-africa: #df6f20;
@brand-nz: #444;
.brand-color {
.brand-default & {
color: @brand-default;
}
.brand-africa & {
color: @brand-africa;
}
.brand-nz & {
color: @brand-nz;
}
}
h1 {
.brand-color;
}
这很好用，但是有时我想将颜色应用于另一个CSS声明-如background-color，并使用上面的代码来实现此目的，我需要复制.brand-color mixin来代替应用
This works well, but sometimes I want to apply the color to another CSS declaration - such as background-color, and to do this with the above code I'd need to duplicate the .brand-color mixin to instead apply background-color.
理想情况下，我希望mixin返回一个变量-我知道这是可能的，但是我不知道如何使用类名来确定返回的值.
Ideally I'd like the mixin to return a variable - I know it's possible, but I can't work out how to use the classname to determine the returned value.
推荐答案
好吧，不，您不能使用类名称来确定变量或返回值.所以通常是相反的，例如:
Well, no, you can't use class name to determine a variable or a return value. So it's usually done in reverse, for example like this:
@brand-default: #649d84;
@brand-africa: #df6f20;
@brand-nz: #444444;
h1 {
.brand-colors();
}
h2 {
.brand-colors(background-color);
}
.brand-colors(@property: color) {
.color(default);
.color(africa);
.color(nz);
.color(@name) {
.brand-@{name} & {
@value: 'brand-@{name}';
@{property}: @@value;
}
}
}
或者像这样:
@brand-default: #649d84;
@brand-africa: #df6f20;
@brand-nz: #444444;
h1 {
.brand-colors({
color: @color;
});
}
h2 {
.brand-colors({
background-color: @color;
});
}
.brand-colors(@style) {
.brand-color(default);
.brand-color(africa);
.brand-color(nz);
}
.brand-color(@name) {
.brand-@{name} & {
@value: ~'brand-@{name}';
@color: @@value;
@style();
}
}
甚至是这样:
.brand(default) {@{color}: #649d84}
.brand(africa) {@{color}: #df6f20}
.brand(nz) {@{color}: #444444}
h1 {
.brand-colors();
}
h2 {
.brand-colors(background-color);
}
.brand-colors(@color: color) {
.-(default);
.-(africa);
.-(nz);
.-(@name) {
.brand-@{name} & {
.brand(@name);
}
}
}
或介于两者之间.或者...哦，等等，这套方法有整个系列的方法(包括各种组合)，例如:
Or something in between. Or... oh wait, there's whole family of methods for this stuff (incl. various combinations), see for example:
- https://stackoverflow.com/a/23660124
- How to thematize in lesscss
- https://stackoverflow.com/a/20072967
- etc.
通常，基于列表/数组/循环的方法更紧凑，尽管我个人更喜欢这种愚蠢的东西:
Usually list/array/loop based methods are more compact, though personally I prefer something dumb like this:
.themed({
h1 {
color: @color;
}
h2 {
background-color: @color;
}
});
.themed(@styles) {
.-(default, #649d84);
.-(africa, #df6f20);
.-(nz, #444444);
.-(@name, @color) {
.brand-@{name} {
@styles();
}
}
}
这篇关于基于祖先类的LessCss动态变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
