SCSS für Schleife mit ungerade Syntax funktioniert aber Syntaxfehler

Question

Hi ich erstellen eine for-Schleife, um Klassen ähnlich wie Bootstrap sein Rastersystem aber mit flexbox zu generieren und ich frage mich, ob jemand weiß, warum ich diesen Fehler bekommen.

@for $i from 1 through 12 { 
    .flex-#{$i} { 
     flex: 0 #{$i} 8.333333333333333 * $i + % ; 
     padding: 0 $default-spacing; 
    } 
} 

alles kompiliert perfekt bekomme ich nur einen Syntaxfehler auf dieser Linie

flex: 0 #{$i} 8.333333333333333 * $i + % ; 

vielleicht seine IDE Basis, im die neueste Version von WebStorm verwenden.

Irgendwelche Ideen?

Danke, kieran.

Answer 1

Wenn Sie Sie eine Zeichenfolge verketten wollen zitiert werden müssen, aber Sie bekommen einen String:

SASS

flex: 0 #{$i} 8.333333333333333 * $i + "%" 

Ausgabe

flex: 0 1 "8.33333%"; 

In Ihrem Fall ist besser multiplicate für 1% um eine Nummer wi zu bekommen th Prozentsatz Einheit

SASS

@for $i from 1 through 12 { 
    .flex-#{$i} { 
     flex: 0 #{$i} 8.333333333333333 * $i * 1% ; 
     padding: 0 10px; 
    } 
} 

Output

.flex-1 { 
    flex: 0 1 8.33333%; 
    padding: 0 10px; 
} 

.flex-2 { 
    flex: 0 2 16.66667%; 
    padding: 0 10px; 
} 
...