如何通过attr()将HTML ``data` string属性传递给SCSS？

Question

我试图在SCSS中设置一个配色方案，其中我可以使用以下HTML：

<div class="swatch" data-bg="green">...</div>

我有一个SCSS混合器定义如下：

@function color($key: 'black') {
  @return map-get($colors, $key);
}

因此，如果我将它传递给background-color: color('green')，它将查看$colors: ( ... )映射，查看'green': #009900,并将background-color: #009900;作为CSS返回。

当我试图将data-bg属性值传递给color() SCSS时，问题就出现了，如下所示：

.swatch[data-bg] {
  background-color: color(attr(data-bg));
}

这不管用。我希望它像这样解析值：

color(attr(data-bg))→color('green')→#009900

然而，SCSS根本不会在CSS中呈现background-color行。

我有个科普，你可以看看我想要什么。这里是“棕色”颜色的样本：https://codepen.io/rbrum/pen/axZLxw

任何帮助都将不胜感激。

Answer 1

对于其他遇到这个问题的人来说，这里是我如何解决我的问题的。

我不依赖于data-属性，而是依赖类名。例如，每当我想要一个具有特定背景色的元素时，我都会使用类名，比如.bg-amber或.bg-purple。我的颜色被定义为：

$colors: (
  'black': #000000,
  'white': #FFFFFF,
  // ...
  'amber': #FFBF00,
  'purple': #800080,
  // ...
);

为了更容易地访问颜色，我定义了一个按名称调用任何颜色的函数：

@function c($key: 'black') {
  @return map-get($colors, $key);
}

然后，我定义了一个混音，给出了一个颜色名称，它将应用于背景颜色。我还可以向它传递CSS属性中使用的前缀。

@mixin bg($color-name, $prefix: '') {
  .#{$prefix}#{$color-name} {
    background-color: c($color-name);
  }
}

如果我想在一次性的情况下使用它，我会像这样使用它：

@include bg('amber', 'bg-');

...which将生成以下内容：

.bg-amber {
  background-color: #FFBF00;
}

最后，我使用@each循环对所有颜色执行此操作：

@each $color-name, $color-val in $colors {
  @include bg($color-name, 'bg-');
}

我还可以定义一个“前台”版本：

@mixin fg($color-name, $prefix: '') {
  .#{$prefix}#{$color-name} {
    color: c($color-name);
  }
}

然后，我可以在@each循环中使用它，就在bg()用法下面：

@each $color-name, $color-val in $colors {
  @include bg($color-name, 'bg-');
  @include fg($color-name, 'txt-');
}

它也可以扩展到像边框颜色，框阴影，等等。