这完全取决于主题之间有多少样式和变量不同,例如(非常)基本的起点可能类似于:
@themes:
blue rgb( 41, 128, 185),
marine rgb( 22, 160, 133),
green rgb( 39, 174, 96),
orange rgb(211, 84, 0),
red rgb(192, 57, 43),
purple rgb(142, 68, 173);
// usage:
#navBar {
.themed(background-color);
}
// implementation:
@import "for";
.themed(@property) {
.for(@themes); .-each(@theme) {
@name: extract(@theme, 1);
@color: extract(@theme, 2);
.theme-@{name} & {
@{property}: @color;
}
}
}
然后像这样的事情模式匹配, 规则集参数等等,您可以自动生成任何复杂的外观/主题层次结构......
例如,几乎相同的简单示例,但具有更多可定制的方法:
// usage:
#navBar {
.themed({
color: @fore-color;
background-color: @back-color;
});
}
// themes:
.theme(@name: green) {
@fore-color: green;
@back-color: spin(@fore-color, 180);
.apply();
}
.theme(@name: blue) {
@fore-color: blue;
@back-color: (#fff - @fore-color);
.apply();
}
.theme(@name: black-and-white) {
@fore-color: black;
@back-color: white;
.apply();
}
// etc.
// implementation:
.themed(@style) {
.theme(); .apply() {
.theme-@{name} & {
@style();
}
}
}