css - SASS通过变量输出多个不同的文件

Question

我正在开展一个项目，该项目涉及每个子页面的不同主题。每个子页面都具有与框架完全相同的 HTML 标记，但在每个子页面上，相同的元素（例如标题）必须具有不同的颜色。

我解决这个问题的方法是在其相应的 CSS 文件（例如 red.css 或 blue.css）中的子页面上拥有不同的每一个声明。这些文件仅包含必须不同的选择器的颜色声明，因此字体大小和其他所有内容都在全局 CSS 文件中。

我希望完成的是在文件中声明颜色变量，并为主题 CSS 文件创建一个 SCSS 框架，其中包括 CSS 声明的相应变量。以更清晰的方式：

变量声明示例：

$red: red;
$blue: blue;

主题框架 SCSS 文件应如下所示：

h1 {
   color: $heading-color;
}

目标是让 SASS 循环遍历变量并创建 X 个具有相同帧的不同 CSS 文件，但每个文件都应在正确的位置具有相应的值，因此 blue.css 应具有蓝色值，红色应该具有红色值等。

这可能吗？我要避免的是制作 X SCSS 文件，其中包含精确的框架，但它们的值具有不同的值，因为这意味着每次发生变化时都要进行 X 次编辑。

score 0 · Accepted Answer

使用 SASS，您可以导入包含常见 CSS 规则的文件。只需创建 2 个文件，每个文件都有不同的变量定义，并包含来自另一个 scss 文件的所有内容。像这样：

主题1.scss：

$primaryColor: red;
$secondaryColor: blue;
@import 'all';

主题2.scss：

$primaryColor: orange;
$secondaryColor: violet;
@import 'all';

_all.scss

/*All your CSS rules including for example:*/
h1 {
    color: $primaryColor;
}

SASS 会编译成两个文件 theme1.css 和 theme2.css 但不需要编写重复的 CSS。

1 回答 1