design-patterns - 在 Stylus/Sass 中编写多个主题的设计模式？

Question

我正在为需要支持多个皮肤/主题的网站编写样式表。例如，一个主题可能是以红色为主色的白底黑字，而另一个主题可能是以栗色为主色的黑底白字。

除了前景色和背景色之外，几乎所有来自一个主题的 CSS 都会转换到另一个主题。

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

/* 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 文件中。例如，

#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 文件的权重时。

所以我的问题是， 如何利用 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 文件。

有任何想法吗？像这样的东西已经存在了吗？

Answer 1

这就是我最终这样做的方式。制作三个 Stylus 文件:main.styl、theme1.styl 和 theme2.styl。然后编辑它们的内容，如下所示:

// 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。)