Css 基于类的主题

我正试图想出一种使用SASS创建基于类的主题的方法，但由于我是新手，我不知道如何使其工作，也不知道我的尝试是否值得

我想一个主题是基于一个类，这是在HTML或Body标签设置。然后所有的颜色和背景等都是从中衍生出来的

我要SASS做的就是处理所有的腿部工作。请原谅这个粗俗的例子，因为我说我是新手：

$baseBackground: #0f0;

.blue { 
    $baseBackground: #0f0;
}
.red {
    $baseBackground: #0f0;
}
.header {
    background: $baseBackground;
}

如果上面的代码块是SASS，我希望CSS的结尾如下：

.header {
    background: #0f0;
}
.blue .header { 
    background: #00f;
}
.red .header{
    background: #f00;
}

我不知道这是否可能。显然，上面的例子不起作用。有没有一种方法可以在不生成其他样式的情况下处理此问题

非常感谢您抽出时间

---

克里斯

我认为最好的解决方案可能是使用。您可以为您的主题设置一个mixin定义，使用各种颜色作为mixin的参数。然后可以使用不同主题的不同参数值调用mixin。下面是一个示例，对您的示例进行了一点扩展，它显示了如何使用多个参数，并且具有“页眉”和“页脚”部分：

此示例中编译的CSS如下所示：

.header{
背景：石灰；
}
.页脚{
背景：石灰；
颜色：白色；
}
.蓝色.标题{
背景：蓝色；
}
.蓝色.页脚{
背景：蓝色；
颜色：浅灰色；
}
.红色.标题{
背景：红色；
}
.红色.页脚{
背景：红色；
颜色：灰色；
}

@mixin theme($background-color, $text-color) {
    .header {
        background: $background-color;
    }

    .footer {
        background: $background-color;
        color: $text-color;
    }
}

@include theme(#0f0, white);

.blue {
    @include theme(#00f, lightgray);
}

.red {
    @include theme(#f00, gray);
}