如何在SCSS中创建一个带有CSS自定义属性和圆锥渐变的for循环？
如何在SCSS中创建一个带有CSS自定义属性和圆锥渐变的for循环？
提问于 2021-08-08 11:53:35
我正在尝试创建一个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上也不起作用。
回答 1
Stack Overflow用户
发布于 2021-08-08 11:59:08
我认为这是解析器中的错误。在#{"%"}工作时添加百分比：
@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上，这两个%都需要写成#{"%"}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68700501
复制相关文章
相似问题
腾讯云开发者
