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

时间:2012-05-28 16:16:35

标签: css for-loop syntax-error 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 个答案:

答案 0 :(得分:0)

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

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