Question

我正在努力想出一种使用SASS创建基于类的主题的方法，但由于我是新手，我不知道它是否能够使它工作或知道我的尝试是否值得。< / p>

我希望主题基于在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的参数。然后，您可以使用不同主题的不同参数值调用mixins。这是一个示例，从您的一些扩展，显示使用多个参数，并具有“标题”和“页脚”部分：

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

Answer 2

你可以用Saas做很多强大的色彩操作。因此，可以从一种基色中导出不同的主题。

http://nex-3.com/posts/89-powerful-color-manipulation-with-sass

基于SASS课程的主题

2 个答案: