我正在尝试创建一个 for 循环，它将生成用于样式化进度条的模式：

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

我试过了：

@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%);
    }
}

和

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

奇怪的是，在https://www.sassmeister.com/它根据我选择的编译器显示不同的错误消息，在https://beautifytools.com/scss-compiler.php它工作正常。它在 CodePen 上也不起作用。

我认为这是解析器中的一个错误。添加百分比#{"%"}有效：

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

请注意，在 CodePen 上，两个 % 都需要写为#{"%"}：

编辑：我已将其报告为错误，但这是设计使然。