我正在尝试在 SCSS 中设置配色方案,我可以在其中使用以下 HTML:
<div class="swatch" data-bg="green">...</div>
我有一个这样定义的 SCSS 混入:
@function color($key: 'black') {
@return map-get($colors, $key);
}
因此,如果我将 background-color: color('green')
传递给它,它将查看 $colors: ( ... )
map ,请参阅'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
如有任何帮助,我们将不胜感激。
最佳答案
对于遇到这个问题的任何其他人,以下是我最终解决问题的方式。
我没有依赖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-');
}
它还可以扩展为边框颜色、框阴影等。
关于html - 如何通过 attr() 将 HTML `data-` 字符串属性传递到 SCSS mixin?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55636102/