首页 文章

基于SASS课程的主题

提问于
浏览 次
0

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

我不知道这是否可行 . 显然上面的例子不起作用 . 有没有办法处理这个而不必生成其他样式？

非常感谢你的时间 .

克里斯

css sass compass-sass

2 回答

  • 2

    我认为最好的解决方案可能是使用SASS mixins的解决方案 . 您可以为主题设置mixin定义，使用各种颜色作为mixin的参数 . 然后，您可以使用不同主题的不同参数值调用mixins . 这是一个示例，从您的一些扩展，显示使用多个参数，并具有"header"和"footer"部分：

    @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;
}
    回复于
  • 0

    你可以用Saas做很多强大的Color Manipulation . 因此可以从一种基色中导出不同的主题 .

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

    回复于

相关问题