我有一个网站使用了一些不同的“主要”颜色.一般的HTML布局保持不变,只有颜色会根据内容而改变.
我想知道我是否可以根据CSS选择器设置颜色变量.通过这种方式,我可以使用一些变量来主题化我的网站,让Sass填充颜色.
例如：
$color-1: #444;
$color-2: #555;
$color-3: #666;
$color-4: #777;
body.class-1 {
color-default: $color-1;
color-main: $color-2;
}
body.class-2 {
color-default: $color-3;
color-main: $color-4;
}
/* content CSS */
.content {
background: $color-default;
color: $color-main;
}
我正在考虑使用mixin,但我想知道是否有更好的方法来做这个 – 可能有一个功能？我对萨斯不是那么好,所以任何帮助都会受到赞赏.
解决方法
我认为
mixin就是答案. (
As I wrote,变量不起作用.)
@mixin content($color-default,$color-main) {
background: $color-default;
color: $color-main;
}
body.class-1 {
@include content(#444,#555);
}
body.class-2 {
@include content(#666,#777);
}
那SCSS compiles to这个CSS：
body.class-1 {
background: #444444;
color: #555555; }
body.class-2 {
background: #666666;
color: #777777; }
如果要将颜色值组合在SCSS文件中,可以将变量与mixin结合使用：
$color-1: #444;
$color-2: #555;
$color-3: #666;
$color-4: #777;
body.class-1 {
@include content($color-1,$color-2);
}
body.class-2 {
@include content($color-3,$color-4);
}
