Kevin Powell - Community•12mo ago

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•12mo 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•12mo ago

😊😊

Gaming

Programming

Create data attribute selector on a SASS loop