SASS error when using % in property value together with for loop variable [duplicate]

问题

This question already has answers here:

Adding a unit to a number in Sass (2 answers)

Closed 3 years ago.

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

The CSS i need looks something like this:

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

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

[... up to 100]

The SASS I have is this:

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

Which gives me this error:

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

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

来源：https://stackoverflow.com/questions/10787609/sass-error-when-using-in-property-value-together-with-for-loop-variable