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

Is there a way to do this in SCSS, to apply the background color $colorState0 dynamically to elem class width data-indx="0"?

SCSS:

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

HTML:

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

CodePudding user response：

You could use a mixin. The one below apply the background to the the element that has elem class and the given data-idx, but you can customise it to your need.

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

@include apply-background(0);

CodePudding user response：

You can try using this method :

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

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

and so on