相关疑难解决方法(0)

假设我有这样的事情：

.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 是否提供任何工具来使此任务更加模块化和可维护？