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