编译到Stylus中的多个文件

Question

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. 谷歌，
2. Stylus documentation。

---

4.不要提供

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

Answer 1

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

以下是使用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;
}