我正在尝试想出一种使用 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;
}
我不知道这是否可能。显然上面的例子是行不通的。有没有一种无需生成额外样式即可处理此问题的方法?
非常感谢您的宝贵时间。
克里斯
最佳答案
我认为最好的解决方案可能是使用 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;
}
关于css - 基于 SASS 类的主题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15494640/