时间戳

首页 > 解决方案 > 如何将变量从 HTML 的类名传递给 SCSS/CSS？

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

问题描述

我想做的是这样

HTML

<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);
}

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

标签： htmlcsssass

解决方案

您可以使用 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;
}

在此处阅读有关它的更多信息： 使用 Sass 映射生成所有实用程序类

推荐阅读