根据类名动态更改变量答案

【问题标题】：Dynamically change a variable based on class name根据类名动态更改变量
【发布时间】：2018-06-07 01:02:22
【问题描述】：

假设我有这样的事情：

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

【问题讨论】：

标签： css sass

【解决方案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>

【讨论】：

天哪，我什至不知道这在 CSS 中是可能的！我实际上发现我应该在 SCSS 中使用 @each 来实现这一点，但是没有理由再使用它了:)。谢谢大佬。

【解决方案2】：

//you can use sass maps - if you want do add new color version of component just add the color to variables to the map.


  //define colors

$product-color-red: red;
$product-color-blue: blue;

//define color map
$colors-list: (
  primary : $product-color-red,
  secondary : $product-color-blue
);

// generate componenent with multiple colors
@each $key in map-keys($colors-list) {
  .mycomponent {
    &.color-#{$key} {
      p {
        color: map-get($colors-list, $key);
      }
    }
  }
}

//effect below, you could change color-xxx class to component variant name
.mycomponent.color-primary p {
  color: red;
}

.mycomponent.color-secondary p {
  color: blue;
}

【讨论】：