css - How to thematize in lesscss

Question

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.

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

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.

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

Answer 1

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