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

Question

This question already has an answer here:

• Adding a unit to a number in Sass 2 answers

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.

Answer 1

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

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