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;
}
}
}
Or like this:
@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();
}
}
Or even like this:
.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:
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();
}
}
}
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
