sass中车身等级的检查

我在sass中定义了一个变量，即$title color:red，现在我想根据主体的类别将其更改为，例如主页上的主体具有类别。因此，所有标题元素的颜色应为红色，如果主体具有类别，则该变量应具有绿色

---

如何在SASS中实现这一点

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

$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;
    }
  }
}

---

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

您也可以在sass中的类后面加一个符号

$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;
}

可能重复：