如何将变量从 HTML 的类名传递到 SCSS/CSS？

Question

我想做的是这样的

超文本标记语言

<div class="custom-color--ff0000">Red</div>
<div class="custom-color--00ff00">Green</div>
<div class="custom-color--0000ff">Blue</div>

CSS

.custom-color--(hex) {
  color:  '#' + (hex);
}

是否有可能做到这一点？我需要萨斯吗？

Answer 1

您可以使用 mixin 在 SASS 中生成修饰符类：

@mixin add-color($argument) {
  $string: unquote($argument);

  &--#{$string} {
    color: unquote('#' + $argument);
  }
}

例子：

.custom-color {
  @include add-color(404145);
  @include add-color(ff0000);
}

CSS 输出：

.custom-color--404145 {
  color: #404145;
}

.custom-color--ff0000 {
  color: #ff0000;
}