如何在主题中实现不同的配色方案

时间:2012-06-07 作者:Alex

这个问题是针对主题开发人员的。

我知道如何使用设置API来收集输入数据,但我想知道包含样式的最佳方式是什么。

假设您有4-5个版本的设计,每个版本都有自己的CSS规则和图像。选项:

你把所有的CSS都塞进了样式里。css并通过body类触发颜色更改。在这种情况下,您可以让浏览器加载未使用的CSS规则和图像(例如,所选选项:“红色”,您还有“蓝色”、“绿色”的规则)。

为每个变体创建单独的样式表,并将所选样式排列在页面中。这可能会使主题难以维护,因为如果更改一个CSS文件,则需要修改所有其他CSS文件。

为每个变体创建单独的样式表,但仅使用额外的颜色样式。因此,您将一个大的“common.css”文件和所选配色方案的css(小)排入队列。这里您可以发出一个额外的HTTP请求:P

  • 2 个回复
    SO网友:Evan Mattson

    我会把所有常见的css放在主题的style.css, 并为颜色选项创建单独的样式表。

    我还会把颜色选项放在他们自己的文件夹中,其中包含该样式的图像。通过这种方式,您可以在颜色选项之间保持文件名相同,从而使代码的维护更加容易。

    如果你想分开common.css 从…起style.css 你可以@import common.css 从颜色选项的表中,而不是将其单独排队。

    SO网友:kalarzo

    你可以使用LESS 为了这个!定义一个全局样式表,并为每种颜色定义一个。为颜色表中的颜色代码设置变量,并在全局表中使用它们,然后@将全局样式表导入到每个颜色样式表中。

    示例:

    全球的较少的

    body{
        background: @bgColor;
    }
    
    红色。较少的

    @bgColor: red;
    
    @import "global.less";
    
    这为每种颜色提供了一个独立的样式表,因此您可以选择选项2,但仍然只维护一个样式表!所有选项的所有优点结合在一起,没有任何缺点:)

    结束