Error de SASS cuando se usa% en el valor de la propiedad junto con la variable de bucle [duplicado]
Esta pregunta ya tiene una respuesta aquí:
Sumando una unidad a un número en Sass 2 respuestasEstoy tratando de escribir algo de SASS (.scss) para generar CSS para un barómetro de donación (piense en la barra de progreso).
El CSS que necesito se ve algo como esto:
.p-0:after {
left: 0%;
}
.p-1:after {
left: 1%;
}
[... up to 100]
El SASS que tengo es este:
@for $i from 0 through 100 {
.p-#{$i}:after {left: #{$i}%;}
}
Lo que me da este error:
Syntax error: Invalid CSS after "...r {left: #{$i}%": expected expression (e.g. 1px, bold), was ";}"
Lo extraño es que si sustituyo "%" en el SASS anterior por "px", SASS está totalmente de acuerdo, pero no es lo que necesito.
Tal vez esto sea super obvio, pero soy bastante nuevo en esta cuestión de SASS.