如何使用 SCSS 更改基于 body 的类的类格式？答案

【问题标题】：How to change a class format based on body's class with SCSS?如何使用 SCSS 更改基于 body 的类的类格式？
【发布时间】：2014-06-28 16:18:52
【问题描述】：

我正在制作一个在三个（或更多）不同的上下文中使用的网络应用程序，我希望每个上下文都有不同的配色方案。但是，通常情况下，我不想维护三个不同的样式表。

例如，假设主题是红色、蓝色和橙色。我的样式表之一描述了链接颜色：

a {
  color: $some_color;
}

我想根据应用到正文的类来拆分它：

body.style1 {
  a {
   color: $red;
  }
}

body.style2 {
  a {
   color: $blue;
  }
}

body.style3 {
  a {
   color: $orange;
  }
}

如果您要更改大量元素的样式，您会很快发现这会变得笨拙。有没有办法做到这一点？

a {
  &closest:body.style1 {
    color: $red
  }
  &closest:body.style2 {
    color: $blue;
  }
  &closest:body.style3 {
    color: $orange;
  }
}

这样我可以以更清晰、更易于维护的方式编写我的 scss。

【问题讨论】：

你试过body.style1 & { ... }吗？不过，老实说，我无法告诉你 & 是否合法。
复制：stackoverflow.com/questions/14552529/dynamic-sass-variables 或 stackoverflow.com/questions/21882528/…

标签： css sass

【解决方案1】：

看来您不必首先拥有&，所以这是可行的（至少在 3.2.10 中）：

a {
  body.style1 & {
    color: $red
  }
  body.style2 & {
    color: $blue;
  }
  body.style3 &{
    color: $orange;
  }
}

【讨论】：

【解决方案2】：

这是我更喜欢。定义一个像 body-style 这样的 mixin：

@mixin body-style($style, $map) {
  body.#{$style} & {
    @each $property, $value in $map {
       #{$property}: $value;
    }
  }
}

然后通过将 $style 作为 body 的样式类并将 $map 作为 css 键和值的映射传递给每个标签。

a {
    @include body-style(style1, (
        color: red, 
        background: white
      )
    );
}

它会返回：

body.style1 a {
  color: red;
  background: white;
}

【讨论】：