SASS:如何从一张SASS地图生成单个主题文件?

时间:2019-04-04 21:04:52

标签: css sass

目标

通过node-sass为站点生成不同的CSS主题,每个主题作为一个单独的CSS文件。

实施(?)

我的目标是拥有一个文件_themes.scss,该文件将所有特定主题的信息/变量保存在一个sass映射中,例如:

$themes: (
  theme-one: (
    accentColor: orange,
    backgroundColor: silver,
  ),
  theme-two: (
    accentColor: lime,
    backgroundColor: black,
  ),
);

对于我的sass地图中的每个主题,都有一个主题scss文件没有问题:

├── _themes.scss
├── _common.scss
├── theme-one.scss
│   ├── @import _common.scss
│   └── @import _themes.scss
└── theme-two.scss
    ├── @import _common.scss
    └── @import _themes.scss

,然后@导入每个文件中的主题图。

问题

但是我如何在每个主题文件中“激活”正确的主题映射键以使用变量名(例如accentColor中的_main.scss)?

我不知道这是否是一种合理的方法,可以解决从一个Sass映射生成不同主题文件的需求。我可以直接在每个主题文件中设置主题变量,但我希望将这些变量合并到一个文件中(此处为_themes.scss)。

我找到了各种解决方案,但是有些解决方案(对我而言)太复杂了,或者它们没有输出单独的CSS文件。

0 个答案:

没有答案