编译到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;
}