css - 在属性值中使用 % 和 for 循环变量时出现 SASS 错误

Question

我正在尝试编写一些 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 东西很陌生。

Answer 1

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

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