Create data attribute selector on a SASS loop

Hey, I'm trying to create a selector that relies on a data-theme attribute, and in order to create a bunch of these selectors based on a list of colors I was trying to do something like this:
.wrapper {
@each $key, $value in $colors {
&[data-theme="#{$key}"] {
background-color: $value;
color: map.get($colors, "text");
}
}
}
.wrapper {
@each $key, $value in $colors {
&[data-theme="#{$key}"] {
background-color: $value;
color: map.get($colors, "text");
}
}
}
Unfortunately, the compiled CSS does not have the quotes around the value on that selector:
.wrapper[data-theme=yellow] {
background-color: #eed49f;
color: #cad3f5;
}
.wrapper[data-theme=yellow] {
background-color: #eed49f;
color: #cad3f5;
}
I tried to use SASS's string module but I still get the same result, even after trying several variations to interpolate the command or store the string in a separate variable. Then, even after hard-coding the value directly to see if it'd works, I still get the same result.
// Test 1:
.wrapper {
@each $key, $value in $colors {
&[data-theme=string.quote("#{$key}")] {
background-color: $value;
color: map.get($colors, "text");
}
}
}

// Test 2:
.wrapper {
@each $key, $value in $colors {
&[data-theme="yellow"] {
background-color: $value;
color: map.get($colors, "text");
}
}
}
// Test 1:
.wrapper {
@each $key, $value in $colors {
&[data-theme=string.quote("#{$key}")] {
background-color: $value;
color: map.get($colors, "text");
}
}
}

// Test 2:
.wrapper {
@each $key, $value in $colors {
&[data-theme="yellow"] {
background-color: $value;
color: map.get($colors, "text");
}
}
}
Currently I'm getting it to work by using a class instead of an attribute so I know the issue is here. Any thoughts? Thanks!
2 Replies
Joao
Joao•17mo ago
Pfff, false alarm. I had the code under the wrong selector... how come that when you show some issue to someone it suddenly works or you realize the problem? 😄
Ssadiq Roy
Ssadiq Roy•17mo ago
😊😊
Want results from more Discord servers?
Add your server