在 Stylus 中编译成多个文件

Compilation to multiple files in Stylus

1。简要

我有 7 个 CSS 文件用于我网站的页面设计。设计仅在颜色上有所不同。 CSS 文件中的其他所有内容都是重复信息。

我有静态站点（HTML+CSS+JavaScript），我使用 Stylus。

我可以使用任何方法减少代码量，而不是在我的 7 CSS 个文件中编写相同的东西吗？

2。例子

例如，我有SashaYellowDesign.css个文件：

.SashaFirstClass {
    color: yellow
}

.SashaSecondClass {
    background-color: black;
    border-color: green
}

// Many another classes

和SashaRedDesign.css文件：

.SashaFirstClass {
    color: red
}

.SashaSecondClass {
    background-color: white;
    border-color: blue
}

// Many another classes

可以看出，文件仅在颜色上有所不同。

3。没有帮助

我找不到如何解决我的问题：

  1. Google,
  2. Stylus documentation.

4。不提供

  1. 是的，如果我使用 SashaYellowDesign.styl 和 SashaRedDesign.styl 文件，我可以稍微减少代码大小。但是我还是要在每个styl文件中写重复的信息。请不要提供这种方法。

为什么不尝试使用变量和导入。

下面是如何使用 SCSS 完成主题，但我相信使用 Stylus 也可以实现同样的效果

在您的情况下，您会有 _color-red.styl、_color-yellow.styl，并且这些文件将只包含变量，没有 css 描述。

_color-red.styl

@main-color: red;
@border-color: red;
...

还有另一种颜色

_color-yellow.styl

@main-color: yellow;
@border-color: yellow;
...

所以你的 core.styl 只会有：

body{
  color: @main-color;
  border-color: @border-color;
}