To pytanie ma już tutaj odpowiedź:

Próbuję napisać trochę SASS (.scss), aby wygenerować CSS dla barometru darowizn (pasek postępu myślenia).

CSS, którego potrzebuję, wygląda mniej więcej tak:

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

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

[... up to 100]

SASS mam to:

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

Co daje mi ten błąd:

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

Dziwne jest to, że jeśli zastąpię „%” w powyższym SASS przez „px”, SASS jest z nim całkiem fajny, ale nie jest to, czego potrzebuję.

Może to jest super oczywiste, ale jestem całkiem nowy w tej sprawie SASS.