SASS根据CSS类设置变量

我有一个使用几种不同“主”颜色的网站.一般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,但我想知道是否有更好的方式来做到这一点,也可能有一个功能?我对SASS不是很好,所以如果有人能帮助我.赞赏.

谢谢.

我认为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);
}
翻译自:https://stackoverflow.com/questions/18112238/sass-set-variable-depending-on-css-class

转载注明原文:SASS根据CSS类设置变量