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

Issue

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 class="elem" data-idx="0"></div>

Solution

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

Answered By - yousoumar