在属性值中使用％和for循环变量时出现SASS错误 [英] SASS error when using % in property value together with for loop variable

问题描述

我想写一些SASS（.scss）来生成一个捐赠晴雨表的CSS（认为进度条）。

I'm trying to write some SASS (.scss) to generate CSS for a donation barometer (think progress bar).

CSS我需要看起来像这：

The CSS i need looks something like this:

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

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

[... up to 100]

SASS I是这样：

The SASS I have is this:

@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 ";}"

奇怪的是，if我用px替换上面SASS中的％SASS是完全酷的，但它不是我需要的。

The weird thing is that if I replace "%" in the above SASS with "px" SASS is totally cool with it, but it's not what I need.

也许这是非常明显的，但我

Maybe this is super obvious, but I'm pretty new to this SASS thing.

推荐答案

看起来很奇怪，但试图将值乘以1％：

It looks weird but try to multiply the value by 1%:

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

这篇关于在属性值中使用％和for循环变量时出现SASS错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！