检查sass的身体类

Question

我已经在sass中定义了一个变量，即$ title-color：red现在我想将它改为基于body的类，例如在主页上正在使用class .home所有标题元素的颜色应该是红色的如果它的身体正在上课，那么那个变量应该是绿色的。

我如何在SASS中实现这一目标。

Answer 1

您还可以在

中的类之后放置＆符号

$background-default: white;
$background-dark: black;
$background-yellow: yellow;

.card {
  background: $background-default;

  body.theme-dark & {
    background: $background-dark;
  }

  body.theme-yellow & {
    background: $background-yellow;
  }
}

将渲染为css

.card {
  background: white;
}

body.theme-dark .card {
  background: black;
}

body.theme-yellow .card {
  background: yellow;
}

Answer 2

我建议创建两个不同的变量：

$color-red: red;
$color-green: green;

$color-title-primary: $color-red;
$color-title-secondary: $color-green;

然后在你的文件中：

body {
  &.home {
    h1,
    h2, 
    h3 {
      color: $color-title-primary;
    }
  &.about {
    h1,
    h2,
    h3 {
      color: $color-title-secondary;
    }
  }
}

可能有其他解决方案，但我认为这很容易理解和维护：）