在手写笔/ Sass中编写多个主题的设计模式？ [英] Design patterns for writing multiple themes in Stylus/Sass?

问题描述

我正在为一个网站编写样式表，该网站需要支持多种外观/主题。例如，一个主题可能是白色为黑色，以红色为主要颜色，而另一个主题可能是白色为黑色，以栗色为主要颜色。

I'm writing a stylesheet for a web site where I need to support multiple skins/themes. For example, one theme might be black-on-white with red as the primary color, and another theme might be white-on-black with maroon as the primary color.

除前景和背景色之类的内容外，几乎所有一个主题的CSS都转换为另一个主题。

Almost all of the CSS from one theme translates over to the other theme, except for things like foreground and background color.

作为一个示例，假设我们有一个div 。该div的大小和位置在主题之间是固定的，但是颜色可能会改变。我们可以将其分成三个不同的CSS文件，如下所示：

As an illustrative example, say we have a div. The size and position of that div is fixed between themes, but the color might change. We could separate this into three different CSS files like so:

/* main.css */
#box {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 200px;
    height: 200px;
}

/* theme1.css */
#box {
    backround-color: red;
}

/* theme2.css */
#box {
    background-color: maroon
}

然后，最终用户将加载 main.css 以及主题样式表之一。另一种设计是将一个类放在body元素上，并使用选择器将正确的颜色全部放在一个CSS文件中。例如，

Then the end user would load main.css plus one of the theme stylesheets. Another design would be to put a class on the body element, and use selectors to apply the right colors, all in one CSS file. For example,

#box {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 200px;
    height: 200px;
}

body.theme1 #box {
    backround-color: red;
}

body.theme2 #box {
    background-color: maroon
}

第二个选项的优点是HTTP请求更少。第一种选择的优点是用户需要从服务器加载较少的数据。当存在许多不同的主题时，这尤其重要，并且（如在我的用例中）当内联背景图像显着增加CSS文件的权重时。

The advantage of the second option is that there are fewer HTTP requests. The advantage of the first option is that the user needs to load less data from the server. This is especially important when there are many different themes, and (as in my use case) when inlined background images significantly increase the weight of the CSS files.

所以我的问题是，如何利用SASS或Stylus等CSS预处理器的功能来创建多个CSS主题文件？

我设想这可能是：

@theme(theme1) {
    $primaryColor: red;
}
@theme(theme2) {
    $primaryColor: maroon;
}

#box {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 200px;
    height: 200px;

    background-color: $primaryColor;
}

这将依次生成上面第一个示例中列出的三个CSS文件。

which would in turn generate the three CSS files listed above in the first example.

有什么想法吗？这样的东西已经存在了吗？

Any ideas? Does something like this already exist?

推荐答案

这就是我最后要做的事情。制作三个Stylus文件： main.styl ， theme1.styl 和 theme2.styl 。然后编辑其内容，如下所示：

Here's how I ended up doing this. Make three Stylus files: main.styl, theme1.styl, and theme2.styl. Then edit their content as shown below:

// theme1.styl
primaryColor = red
@require("main.styl")

// theme2.styl
primaryColor = maroon
@require("main.styl")

// main.styl
#box {
    top: 50px
    left: 50px
    width: 200px
    height: 200px
    background-color: primaryColor
}

然后，您最终得到的是一个 theme1.css ，一个 theme2.css ，其中包含应用程序的所有定义及其各自的主题。 （您将不再需要使用 main.css 。）

Then what you end up with is a theme1.css and a theme2.css that contain all of the definitions for the application with their respective theming. (You won't need to use main.css any more.)

这篇关于在手写笔/ Sass中编写多个主题的设计模式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！