如何在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();

        }

    }

}