如何在lesscss中主题化

Question

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

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

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

这就是说，我对主题化全局较小变量感兴趣，例如：

// 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类定义（或重新定义）较少的变量？

Answer 1

这完全取决于主题之间有多少种样式和变量，例如（非常）基本的凝视点可能是这样的：@主题：    蓝色RGB（41，128，185），    海洋rgb（22，160，133），    绿色rgb（39，174，96），    橙色rgb（211，84，0），    红色RGB（192，57，43），    紫色RGB（142，68，173）;//用法：#navBar {    .themed（background-color）;}//实现：@import “为” ;.themed（@property）{    .for（@themes）; .-each（@theme）{        @name：提取（@theme，1）;        @color：提取（@theme，2）;        .theme-@ {name}和{            @ {属性}：@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();        }    }}