2016-07-19 17 views
1

Ich versuche, mehrere Spalten zu erstellen, ohne eins nach dem anderen mit Stylus zu erstellen. Das ist, was ich bisher getan habe:Ist es möglich, einen Zähler in einer Eigenschaft mit dem Stylus zu durchlaufen?

for i in (1..2) 
    .column-{i} 
     /* random-prop */ 

Die kompilierte Version des Codes zeigte:

.column-1 { /* random-prop */ } 
.column-2 { /* random-prop */ } 

Ich habe versucht, mehrere Variablen wie die oben erstellen (nur zum Testen):

column-size-1 = 100% 
column-size-2 = 50% 

Aber wenn ich versuche, das gleiche zu tun habe ich getan vor:

for i in (1..2) 
    .column-{i} 
     width column-size-{i} 

Es funktioniert nicht und ich weiß nicht warum (ich versuche etwas Neues zu lernen und Stylus erschien).

Was ist der bessere Weg zum Erstellen mehrerer Spalten in Stylus, viele Replikationen zu vermeiden?

Antwort

1

Wenn ich eine Korrektur vornehmen kann: die Arrays starten bei Null, so müssen Sie schreiben:

colors = #f00, #0f0 
for i in (0..1) 
    .column-{i} 
     background colors[i] 

Sie können die Schleife mit dem colors Variable statt Nummer Schleife durch das Array verbessern, auf diese Weise, wenn Werte in die Liste aufgenommen werden muß nicht die Nummer ändern in die Schleife.

Stylus

colors = #f00, #0f0, #000 
for color, i in colors 
    i=i+1 
    .column-{i} 
    background color 

Ausgabe

.column-1 { 
    background: #f00; 
} 
.column-2 { 
    background: #0f0; 
} 
.column-3 { 
    background: #000; 
} 
0

Gefunden eine Antwort ... ich ein Array erstellt haben (das war hart in Dokumentation zu finden) und nannte es in Schleife, Beispiel:

colors = #f00, #0f0 
for i in (1..2) 
    .column-{i} 
     background colors[i]