Ошибка SASS при использовании% в значении свойства вместе с переменной цикла [duplicate]

На этот вопрос уже есть ответ:

Добавление единицы в число в Sass 2 ответа

Я пытаюсь написать SASS (.scss) для генерации CSS для барометра пожертвований (индикатор выполнения).

CSS, который мне нужен, выглядит примерно так:

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

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

[... up to 100]

У меня есть SASS:

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

Который дает мне эту ошибку:

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

Странная вещь в том, что если я заменим «%» в вышеупомянутом SASS на «px», то SASS - это круто, но это не то, что мне нужно.

Может быть, это супер очевидно, но я довольно новичок в этом SASS.

Ответы на вопрос(1)

Ваш ответ на вопрос