Kevin Powell - CommunityKP-C
Kevin Powell - Community•3y ago•
2 replies
Joao

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


Unfortunately, the compiled CSS does not have the quotes around the value on that selector:

.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");
        }
    }
}


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!
Was this page helpful?