2 replies

Create data attribute selector on a SASS loop

Hey, I'm trying to create a selector that relies on a

data-theme

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!

KP-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

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

// 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!

Create data attribute selector on a SASS loop

Similar Threads

Create data attribute selector on a SASS loop

Similar Threads

Similar Threads

Similar Threads