Css 如何在LESSCS中主题化

由于我正处于开发应用程序的试生产周期，我经常改变视觉效果，以便与客户验证的内容保持一致

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

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

也就是说，我感兴趣的是将全局变量主题化，如下所示：

// default appearance
@navBarHeight: 50px;

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

#navBar {
    height: @navBarHeight;

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

通过这种方式，在.less的后面，我提出了如下的类：

// default appearance
@navBarHeight: 50px;

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

#navBar {
    height: @navBarHeight;

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

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

---

是否可以根据外观CSS类定义（或重新定义）更少的变量？

这完全取决于主题之间有多少样式和变量不同，例如（非常）基本的起始点可能类似于：

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