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 。）

Answer 2

我对Sass有更多的经验，所以我的答案将主要集中于此。至于Stylus，我不太清楚评论。

在我看来，你的第一个选择是最合适的。首先，动态地包含第二个“主题特定”.css文件相对容易，并且就像你提到的那样，如果你最终会有很多主题，那么它会保持精简，因为你有基本样式表，然后是一个主题特定的样式表。

它比第二个选项更容易扩展，因为您可以创建另一个主题并仅将新的.css文件添加到您的服务器/应用程序，而使用第二个选项则必须重新上载整个文件。没有太大的问题，但是如果你有很多主题，那么保持Sass文件可能会变得非常繁琐，即使你在编译之前将它们分成部分然后@import 'themes/theme-red'或类似的东西进入主Sass样式表

不幸的是，Sass没有很多可用的服务器端编译选项，您可以根据所选主题动态生成样式。一个名为phpSass的编译器确实存在，但它现在似乎基本上已经不存在了，我不确定它会有多好。 LESS更广泛地用于动态编译，因为如果你倾向于考虑它，可以有更多的服务器端和客户端编译选项。

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

2 个答案: