如何通过 attr() 将 HTML `data-` 字符串属性传递给 SCSS mixin？答案

【问题标题】：How do I pass an HTML `data-` string attribute into a SCSS mixin via attr()?如何通过 attr() 将 HTML `data-` 字符串属性传递给 SCSS mixin？
【发布时间】：2019-04-11 15:26:38
【问题描述】：

我正在尝试在 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 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

任何帮助将不胜感激。

【问题讨论】：

SASS 是预编译的，所以你不能使用运行时变量。
你仍然可以使用attr()，你只需要省略特定于SASS的color()并确保属性的内容是CSS中的有效颜色符号。
既然这是真的，@JamesCoyle，我想我能希望的只是一个 SASS 函数/mixin，它接受一个字符串，并用每个颜色名称调用它。例如。 @include generate-bg-color('brown');等
实际上，我编写了一个@each 循环，它遍历地图中的每种颜色，然后以这种方式生成背景颜色。这样，我可以只使用class="swatch green"，并且在我的 SASS 中我可以将样式应用于每个颜色类。

标签： html css sass mixins scss-mixins

【解决方案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);
  }
}

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

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

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

【讨论】：