如何在lesscss中进行主题化答案

【问题标题】：How to thematize in lesscss如何在lesscss中进行主题化
【发布时间】：2014-06-26 09:28:36
【问题描述】：

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

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

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

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

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

【问题讨论】：

标签： css variables themes less

【解决方案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);

// 用法：

#导航栏{
    .themed（背景色）；
}

// 执行：

@import "for";

.themed(@property) {
    .for(@themes); .-每个（@theme）{
        @name: 提取(@theme, 1);
        @color: 提取(@theme, 2);

        .theme-@{name} & {
            @{属性}：@颜色；
        }
    }
}

然后使用Pattern Matching、Ruleset Arguments 等内容，您可以自动生成任何复杂的外观/主题层次结构...

例如几乎相同的简单示例，但具有更多可定制的方法：

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

【讨论】：