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

Question

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

\n\n

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

我有一个 SCSS mixin 定义如下：

\n\n

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

所以，如果我通过它background-color: color(\'green\')，它会查看$colors: ( ... )地图，查看并以 CSS 形式\'green\': #009900,返回。background-color: #009900;

\n\n

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

\n\n

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

这是行不通的。我希望它能像这样解析该值：

\n\n

color(attr(data-bg))\xe2\x86\x92 color(\'green\')\xe2\x86\x92#009900

\n\n

然而，SCSS 根本不会background-color在 CSS 中渲染该行。

\n\n

我有一个 Codepen，你可以在其中看到我想要做什么。这是这里的“棕色”色样：https://codepen.io/rbrum/pen/axZLxw

\n\n

任何帮助将不胜感激。

\n

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

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

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

最后，我使用@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-');
}

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