css - 基于 SASS 类的主题

Question

我正在尝试想出一种使用 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;
}

我不知道这是否可能。显然上面的例子是行不通的。有没有一种无需生成额外样式即可处理此问题的方法？

非常感谢您的宝贵时间。

克里斯

Answer 1

我认为最好的解决方案可能是使用 SASS mixins 的解决方案.你可以为你的主题设置一个 mixin 定义，将各种颜色作为 mixin 的参数。然后，您可以为各种主题调用具有不同参数值的混合。这是一个示例，从您的示例扩展而来，显示了使用多个参数并具有“页眉”和“页脚”部分:

@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);
}

此示例中编译后的 CSS 如下所示:

.header {
    background: lime;
}
.footer {
    background: lime;
    color: white;
}

.blue .header {
    background: blue;
}
.blue .footer {
    background: blue;
    color: lightgrey;
}

.red .header {
    background: red;
}
.red .footer {
    background: red;
    color: gray;
}