我正在开发一个涉及每个子页面的不同主题的项目。每个子页面都具有与框架完全相同的HTML标记,但在每个子页面上,相同的元素(如标题)必须具有不同的颜色。
我解决这个问题的方法是让每个声明在相应CSS文件中的子页面上有所不同,例如red.css或blue.css。这些文件只包含必须不同的选择器的颜色声明,因此font-size和其他所有内容都在全局CSS文件中。
我希望实现的是在文件中声明颜色变量,并为主题CSS文件创建一个SCSS框架,其中包含CSS声明的相应变量。以更清晰的方式:
变量声明的示例:
$red: red;
$blue: blue;
主题框架SCSS文件看起来像这样:
h1 {
color: $heading-color;
}
目标是让SASS循环遍历变量并创建具有相同帧的X个不同的CSS文件,但是每个文件都应该在正确的位置具有相应的值,所以blue.css应该具有蓝色值,红色应该有红色值等。
这可能吗?我试图避免的是使X SCSS文件中包含精确的框架,但是它们的值的值不同,因为这意味着每次更改时都会编辑X编号。