如何在lesscss中进行主题化 [英] How to thematize in lesscss

问题描述

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

As I am in a preproduction cycle to develop an app, I am often changing visual in order to converge to what will be validated by the customer.

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

Some visuals of the same page (call it themes) would be interesting to keep so that I can present them quickly to the customer.

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

The way I found is to create an appearance class I put on body and by changing it I could change the page itself accordingly.

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

This said, I am interested in thematizing global less variable such as follows:

// default appearance
@navBarHeight: 50px;

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

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

This way, later in the .less, I come up with classes as follows:

#navBar {
    height: @navBarHeight;

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

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

Of course, the actual case if more complex.

是否可以根据外观 CSS 类定义(或重新定义)较少的变量?

Is it possible to define (or redefine) less variables depending on an appearance CSS class?

推荐答案

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

It all depends on how many styles and variables differ between themes, for example a (very) basic staring point could be something like:

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

这篇关于如何在lesscss中进行主题化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！