css - 如何在lesscss中主题化

Question

由于我正处于开发应用程序的预生产周期中，因此我经常更改视觉效果以融合到将由客户验证的内容。

保留同一页面的一些视觉效果(称为主题)会很有趣，这样我可以快速将它们展示给客户。

我找到的方法是创建一个放在 body 上的外观类，通过更改它我可以相应地更改页面本身。

这就是说，我对主题化全局 less 变量很感兴趣，如下所示:

// default appearance
@navBarHeight: 50px;

.appearanceWhite {
    @navBarHeight: 130px;
}
.appearanceBlack {
    @navBarHeight: 70px;
}

这样，稍后在 .less 中，我想出了如下类:

#navBar {
    height: @navBarHeight;

    // appearance handling
    .appearanceBlack & {
        background-color: black;
    }
    .appearanceWhite & {
        background-color: white;
    }
}

当然，实际情况如果更复杂。

是否可以根据外观 CSS 类定义(或重新定义)less 变量？

Answer 1

这完全取决于主题之间有多少样式和变量不同，例如(非常)基本的凝视点可能是这样的:

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

Then with things like Pattern Matching, Ruleset Arguments, etc. etc. you can get to automated generation of whatever complex appearance/theming hierarchy...

For instance almost the same simple example but with more customizable approach:

// 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();
        }
    }
}