Css 根据需要设置SASS变量

我正在寻找一种方法，根据body标签上的类使用特定的颜色

我有一个像这样的主scss文件

// variables.scss
$bg-main:      white;
$color-first:  red;
$color-second: green;

在我的其他文件中，我使用颜色

// content.scss
.content {
     .some-selector: {
         // some styles
         color: $color-second;
     }
     a:hover {
         // some styles
         color: $color-second;
     }
}    

// and same goes for menu.scss etc.

现在我在主体上有了一个动态类，它根据当前选定的菜单而变化。我希望$color second对于每个身体类别都是不同的，我不知道如何做到这一点。我找到的唯一解决方案是将每个文件中的所有$color second移到一个文件中，如下所示：

.body-1 {
    .content a:hover, .content .some-selector {
        color: green;
    }
}
.body-2 {
    .content a:hover, .content .some-selector {
        color: blue;
    }
}
.body-1 {
    .content a:hover, .content .some-selector {
        color: black;
    }
}

所以我不需要在每个文件中写入颜色。这很好，但如果我需要将$color秒设置为其他选择器，我需要将其放在这个大文件中

这是否可以用另一种方式来实现

我已经检查了这些答案，但对我帮助不大：

---

有多种方法可以做到这一点。想到的最明显的两个是混合和循环：
混血儿 只需将所有您想要的内容放入一个mixin中，然后将其用于每个body类：

@mixin colored-content($color) {
  .content a:hover, .content .some-selector {
      color: $color;
  }

  /* Any other rules which use $color here */
}

.body-1 {
  @include colored-content(green);
}

.body-2 {
  @include colored-content('#FF0000');
}

.body-3 {
  @include colored-content(darken(red, 20));
}

您可以使用任意数量的参数（例如，

$textColor

和

$bgColor

）、条件或规则扩展此示例
使用这种方法，您将不会重复SCSS代码，并且任何更新都将很容易引入
环 另一种方法是使用简单的循环：

$body_themes: (
    "body-1": green,
    "body-2": #FF0000,
    "body-3": darken(red, 2)
);

@each $body_class, $color in $body_themes {
  .#{$body_class} {
    .content a:hover, .content .some-selector {
      color: $color;
    }

    /* Any other rules which use $color here */
  }
}

它甚至更短，但依我看，可读性较差

---

另外，可以将mixin和循环组合在一起：）
您知道您可以创建仅适用于当前文件的局部变量吗？只需让它们的名字以

$\uUUUUK

开头即可。mixin方法可以工作，但each指令会抛出一个错误（错误：在“{”：预期“}”之后的CSS无效），是“{$body\u class}”）@rekam很高兴听到这有帮助：）我已经更新了我的答案，循环方法中有一个输入错误。