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

user_10350348 0
Viewed 47

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>
sass css
2 Answers

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

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

user_151162070
Related