根据类名动态更改变量

Question

假设我有这样的事情：

.object {
  $primary-color: blue;
  h1 {
    font-size: 40px;
    color: $primary-color; 
  }
  p {
    font-size: 20px;
    color: $primary-color; 
  }
}

现在我会有一个蓝色的物体。但是假设我想制作相同的对象但颜色为红色，写起来可能很直观

.object red {
  $primary-color: red;
}

并期望所有 $primary-color 变为红色，但这在 SCSS 中无效。我要写的是：

.object red {
  $primary-color: red;
  h1 { color: $primary-color; }
  p { color: $primary-color; }
}

如果我这样做，我仍然可以保持 h1 中的 40px 字体大小和 p 中的 20px 字体大小，并将所有颜色更改为红色。然而，一旦我的代码变大，这将变得越来越难以维护。

SCSS 是否提供任何工具来使此任务更加模块化和可维护？

Answer 1

当然 SCSS 提供了这样的功能，但你也可以使用 CSS 变量来使用 CSS 来实现：

.object h1 {
  font-size: 40px;
  color: var(--p, blue);
}

.object p {
  font-size: 20px;
  color: var(--p, blue);
}
.red {
  --p:red;
}
.other-color {
  --p:rgb(15,185,120);
}

<div class="object">
<h1>Blue title</h1>
<p>blue text</p>
</div>
<div class="object red">
<h1>red title</h1>
<p>red text</p>
</div>
<div class="object other-color">
<h1>red title</h1>
<p>red text</p>
</div>