Erro SASS ao usar% no valor da propriedade junto com a variável loop [duplicate]

Esta questão já tem uma resposta aqui:

Adicionando uma unidade a um número no Sass 2 respostas

Eu estou tentando escrever algum SASS (.scss) para gerar CSS para um barômetro de doação (acho barra de progresso).

O CSS que eu preciso é algo como isto:

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

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

[... up to 100]

O SASS que eu tenho é isto:

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

O que me dá esse erro:

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

O estranho é que se eu substituir "%" no SASS acima por "px" o SASS é totalmente legal com ele, mas não é o que eu preciso.

Talvez isso seja super óbvio, mas eu sou muito novo nessa coisa do SASS.

questionAnswers(1)

yourAnswerToTheQuestion