通过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文件。