根据选择器在Sass中设置变量

对我来说，对我的问题的肯定答案是创建一个地图，并通过它们循环搜索如下：

$pallettes: (
  light-theme: (
    container-color: red,
    inner-color: blue,
  ),
  dark-theme: (
    container-color: black,
    inner-color: gray,
  ),
);

@each $pallette, $content in $pallettes {
  .main.#{$pallette} {
    background-color: map-get($content, container-color);
    .inner-div {
      background-color: map-get($content, inner-color);
    }
  }
}

如果不想为每种颜色使用变量，则可以对所有颜色使用一个变量。在mixin中，您可以使用选择正确的颜色nth。例如，如果将颜色的索引写为1，那么您将在color变量中获得第一种颜色。

$colors: #444, #555, #666, #777;

@mixin content($color-default-num, $color-main-num) {
  background: nth($colors, $color-default-num);
  color: nth($colors, $color-main-num);
}

body.class-1 {
  @include content(1, 2);
}

您还可以使用“＆”和“父”选择器来创建混合。http://codepen.io/juhov/pen/gbmbWJ

@mixin color {
  body.blue & {
    background: blue;
  }
  body.yellow & {
    background: yellow;
  }
}

您可以简单地在类包装器中覆盖您的scss变量：

$color1: red;
$color2: yellow;

header { background: $color1; }

.override-class {
  $color1: green;
  header { background: $color1; }
}

似乎为我工作。

如果您真的想变色，还可以在单​​个变量（如中$scheme1: class1 #333 #444）中定义不同的配色方案，其中第一个值始终是名称，然后是该方案中的所有颜色。

然后，您可以使用@each：

// Define your schemes with a name and colors
$scheme1: class1 #444 #555;
$scheme2: class2 #666 #777;
$scheme3: class4 #888 #999;

// Here are your color schemes
$schemes: $scheme1 $scheme2 $scheme3;

@each $scheme in $schemes {
  // Here are the rules specific to the colors in the theme
  body.#{nth($scheme, 1)} .content {
    background-color: nth($scheme, 2);
    color: nth($scheme, 3);
  }
}

这将编译为：

body.class1 .content {
  background-color: #444444;
  color: #555555; }

body.class2 .content {
  background-color: #666666;
  color: #777777; }

body.class4 .content {
  background-color: #888888;
  color: #999999; }

显然，如果你不想合并body.class1，并.content在你的选择，你可以只指定一个混合content($main, $default)并调用它里面的@each使用nth就像在上面的代码，但问题是你不具备写出来的每一条规则您的课程。

编辑在Sass中动态创建或引用变量并使用SASS将字符串和变量合并为变量时，有很多有趣的答案。

I think a mixin is the answer. (As I wrote, variables won’t work.)

@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 编译为以下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);
}