如何在 SCSS 中组合变量名和数据属性？

Question

有没有办法在 SCSS 中做到这一点，将背景颜色 $colorState0 动态应用到 elem class 宽度 data-indx="0"？

SCSS:

$colorState0: rgb(0, 0, 0);
.elem {
 background: $colorState(data-idx);
}

HTML:

<div class="elem" data-idx="0"></div>

Answer 1

您可以使用 mixin。下面的一个将背景应用于具有 elem class 和给定 data-idx 的元素，但您可以根据需要自定义它。

@mixin apply-background($idx) {
   .elem[data-idx="#{$idx}"]{
    background : rgb($idx, $idx, $idx);
   }
}

@include apply-background(0);

Answer 2

你可以试试这个方法:

$colorState0: rgb(0, 0, 0);
$colorState1: rgb(0, 0, 0);
.elem[data-idx=0] {
 background: $colorState0;
}

.elem[data-idx=1] {
 background: $colorState1;
}

等等

如何在 SCSS 中组合变量名和数据属性？

How to combine variable name and data-attr in SCSS?

css

sass