我认为
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);
}