如何通过attr（）将HTML`data-`字符串属性传递给SCSS mixin？

Question

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

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

我有一个SCSS mixin定义如下：

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

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

当我尝试将data-bg属性值传递到color() SCSS mixin时出现问题，如下所示：

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

这不起作用。我希望它能解析这样的价值：

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

但是，SCSS甚至不会在CSS中渲染background-color行。

我有一个Codepen，你可以看到我想要的东西。这是“棕色”色板：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);
}

然后我定义一个mixin，给定一个颜色名称，将它作为背景颜色应用。我也可以传递一个CSS属性中使用的前缀。

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

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

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

......会产生以下结果：

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

它还可以扩展为边框颜色，框阴影等。