如何通过 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, 和 return 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，您可以在其中查看我的目标。这里是 "Brown" 色样：https://codepen.io/rbrum/pen/axZLxw

如有任何帮助，我们将不胜感激。

Answer 1

对于遇到这个问题的任何其他人，以下是我最终解决问题的方式。

我没有依赖 data- 属性，而是依赖 class 名称。例如，每当我想要一个具有特定背景颜色的元素时，我都会使用 class 名称，例如 .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-');
}

我也可以定义一个"foreground"版本：

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

然后我可以在 bg() 用法正下方的 @each 循环中使用它：

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

它也可以扩展为边框颜色、框阴影等。

How do I pass an HTML `data-` string attribute into a SCSS mixin via attr()?