Attempting to devise a for loop that will create this format for enhancing a progress bar style:
progress[value="1"]::-webkit-progress-bar {
background: conic-gradient(
var(--progress-color) 0% 1%,
var(--rest-color) 1% 100%
);
}
Experimented with:
@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%);
}
}
as well as
@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's perplexing is that at , it displays varying error messages depending on the compiler chosen, and at , it operates smoothly. However, it fails to function on CodePen.