css - 根据类名动态更改变量

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 变量来实现它:

.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>