css - 将属性值中的 % 与 for 循环变量一起使用时出现 SASS 错误

<分区>

我正在尝试编写一些 SASS (.scss) 来为捐赠晴雨表(想想进度条)生成 CSS。

我需要的 CSS 看起来像这样:

.p-0:after {
    left: 0%;
}

.p-1:after {
    left: 1%;
}

[... up to 100]

我的 SASS 是这样的:

@for $i from 0 through 100 {
    .p-#{$i}:after {left: #{$i}%;}
}

这给了我这个错误:

Syntax error: Invalid CSS after "...r {left: #{$i}%": expected expression (e.g. 1px, bold), was ";}"

奇怪的是，如果我将上面 SASS 中的“%”替换为“px”，SASS 会很酷，但这不是我需要的。

也许这很明显，但我对 SASS 还是个新手。

最佳答案

看起来很奇怪，但尝试将值乘以 1%:

@for $i from 0 through 100 {
  .p-#{$i}:after {left: #{$i*1%};}
}

关于css - 将属性值中的 % 与 for 循环变量一起使用时出现 SASS 错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10787609/

相关文章：

jquery - 滚动后更改导航栏背景颜色