CODEWITHSUNDEEP
cssfor-loopsass
jcubic
jcubic

Reputation: 66590

How to create a for loop with CSS custom properties and conic gradient in SCSS?

I'm trying to create a for loop that will generate this pattern for styling progress bar:

progress[value="1"]::-webkit-progress-bar {
  background: conic-gradient(
                var(--progress-color) 0% 1%,
                var(--rest-color) 1% 100%
              );
}

I've tried:

@for $percent from 0 through 99 {
    progress[value="#{$percent}"]::-webkit-progress-bar {
            background: conic-gradient(
        var(--progress-color) 0% #{$percent}%,
        var(--rest-color) #{$percent}% 100%);
    }
}

and

@mixin gradient($percent) {
    background: conic-gradient(
        var(--progress-color) 0% #{$percent}%,
        var(--rest-color) #{$percent}% 100%);
}


@for $i from 0 through 99 {
    progress[value="{$i}"]::-webkit-progress-bar {
        @include gradient($i);
    }
}

What is weird is that at https://www.sassmeister.com/ it shows different error messages depending on the compiler I pick and at https://beautifytools.com/scss-compiler.php it works fine. It also doesn't work at CodePen.

Upvotes: 1

Views: 158

Answers (1)

jcubic
jcubic

Reputation: 66590

I think this is a bug in the parser. Adding percent as #{"%"} works:

@for $percent from 0 through 99 {
    progress[value="#{$percent}"]::-webkit-progress-bar {
            background: conic-gradient(
                var(--progress-color) 0% #{$percent}#{"%"},
                var(--rest-color) #{$percent}% 100%
            );
    }
}
progress[value="100"]::-webkit-progress-bar { background: var(--progress-color); }

@for $percent from 0 through 99 {
    progress[value="#{$percent}"] {
        background: conic-gradient(
            var(--progress-color) 0% #{$percent}#{"%"},
            var(--rest-color) #{$percent}% 100%);
    }
}
progress[value="100"] {
    background: var(--progress-color);
}

Note that on CodePen both % need to be written as #{"%"}:

EDIT: I've reported this as a bug, but this is by design.

Upvotes: 2

Related Questions