SASS-Fehler bei Verwendung von% im Eigenschaftswert zusammen mit for-Schleifenvariable [duplizieren]

Diese Frage hat hier bereits eine Antwort:

Hinzufügen einer Einheit zu einer Zahl in Sass 2 Antworten

Ich versuche, SASS (.scss) zu schreiben, um CSS für ein Spendenbarometer zu generieren (Fortschrittsbalken).

Das benötigte CSS sieht ungefähr so ​​aus:

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

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

[... up to 100]

Das SASS, das ich habe, ist das:

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

Was gibt mir diesen Fehler:

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

Das Seltsame ist, dass wenn ich "%" in der obigen SASS durch "px" ersetze, SASS damit total cool ist, aber es ist nicht das, was ich brauche.

Vielleicht ist das super offensichtlich, aber ich bin ziemlich neu in dieser SASS-Sache.

Antworten auf die Frage(1)

Ihre Antwort auf die Frage