SASS error când folosiți% în valoarea proprietății împreună cu variabila pentru buclă

Încerc să scriu câteva SASS (.scss) pentru a genera CSS pentru un barometru de donație (bara de progres).

CSS are nevoie de ceva asemănător:

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

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

[... up to 100]

SASS-ul pe care îl am este:

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

Care îmi dă această eroare:

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

Lucrul ciudat este că dacă înlocuiesc "%" în SASS de mai sus cu "px", SASS e cu adevărat cool cu ​​el, dar nu este ceea ce am nevoie.

Poate că acest lucru este foarte evident, dar sunt destul de nou pentru acest lucru SASS.

0

1 răspunsuri

Arată ciudat, dar încercați să multiplicați valoarea cu 1%:

@for $i from 0 through 100 {
  .p-#{$i}:after {left: #{$i*1%};}
}
0
adăugat
Multumesc @MikhailD, # {$ i * 1%} funcționează, dar există un motiv bun pentru care px funcționează, dar nu%?
adăugat autor Eratox, sursa
Mai bine să faci matematică în afara interpolării. Mai ușor de citit și mai puține șanse ca operațiunile să se repete. De exemplu, dacă % este interpretată de ruby ​​ca modulo ? # {$ 1} * 1%
adăugat autor maxbeatty, sursa
@maxbeatty, vă mulțumesc pentru comentariul dvs. De asemenea, m-am gândit în acest fel, dar în acest caz CSS compilate arată ca: .p-3: după {left: 3 * 1%; }
adăugat autor Mikhail D, sursa
@ Eratox, ești binevenit. Pentru a fi sincer, nu știu bine SASS pentru a răspunde la această întrebare. Pot să presupun că, pe baza "SassScript acceptă operațiile aritmetice standard pe numere (+, -, *, /,%) și va converti automat între unități dacă poate" de la sass-lang.com/docs/yardoc/… . Deci,% este un operator și nu poate fi adăugat doar în unele cazuri. Cu toate acestea, nu am înțeles, de ce nu folosiți ceva de genul: \%
adăugat autor Mikhail D, sursa