Generieren von Selektoren mit Stylus-Schleife

Question

In Stylus versuche ich :nth-of-type() Selektoren basierend auf einem Farbfeld zu generieren. Dies ist tatsächlich mein erstes Mal mit Arrays in Stift, so bin ich ein wenig ratlos wie nach der Semikolon- und Klammer-freie Syntax, die ich in examples sehe.

Das Ziel ist es, ein Äquivalent der folgenden haben:

.chart { 
    li { 
    display: flex; 
    align-items: flex-end; 

    &:nth-of-type(1) { 
     background-color: #FFE3A9; 
     span { 
     background-color: #FFCC66; 
     } 
    } 
    &:nth-of-type(2) { 
     background-color: #FCCCA2; 
     span { 
     background-color: #F79850; 
     } 
    } 
    } 
} 

Mein Versuch:

bg_colors = (#FFEDA9 #FDCCA2) 
fill_colors = (#FFCD66 #FD9850) 

.chart { 
    li { 
    display: flex; 
    align-items: flex-end; 

    for num in range(0, 1) 
     &:nth-of-type({num}) 
     background-color: bg_colors[num] 
     span 
      background-color: fill_colors[num] 
    } 
} 

Ich erhalte Kompilierungsfehlern aus einer unerwarteten } (Winkel cli), so frage ich mich, wo meine Syntax ist falsch.

Answer 1

OK. Also, diese Frage ist einzigartig zu the duplicate I mentioned - vor allem, weil es 2 Arrays in der Schleife verwendet werden. Möglicherweise möchten Sie die Frage für zukünftige Suchanfragen umbenennen.

Zunächst einmal, es dauerte eine lange Zeit zu erkennen, dass ich Fehlermeldungen ernst nehmen musste. In Ihrem Fall - es sagt Ihnen gibt es Klammern - und es sollte nicht sein - so sind sie unerwartet. Entferne sie. Stylus-Syntax ist meistens wie SCSS - alles, was Sie tun müssen, ist weniger Dinge zu tippen - und sicherzustellen, dass Ihre Einzüge perfekt sind. Die Gedankenstriche ersetzen die Klammern, um Anfang und Ende der Regeln zu verdeutlichen. Entfernen Sie alle Klammern - und Semikola. * (Randbemerkung - Verwendung $ var für Variablen/sie wahrscheinlich später erforderlich - auch - : verwendet eine Option sein - sie werden auch erforderlich)

Zweite, vermute ich, dass diese for Schleife ist wie eine jede Schleife in Javascript, so dass Sie currentvalue, currentIndex, fullArray Parameter mit einer durch Komma getrennten Liste erhalten können. (Ich bin nicht 100% auf, dass)

for fillColor, currentIndex in $fillColorArray

Dies würde ermöglichen es Ihnen, die Farbe und seinen Index, da diese Platzhalter zuzugreifen.

Hier ist lebendig Beispiel: https://codepen.io/sheriffderek/pen/64c6791116c3a180cb196610f9962f17/ - Sie können auswählen, das kompilierte CSS im kleinen Pfeilsymbol des Stiftfensters anzuzeigen.

Markup

<ul class="chart-list one"> 
    <li class="chart"> 
     <span>Chart 1</span> 
    </li> 
    <li class="chart"> 
     <span>Chart 2</span> 
    </li> 
    <li class="chart"> 
     <span>Chart 3</span> 
    </li> 
    <li class="chart"> 
     <span>Chart 4</span> 
    </li> 
</ul> 

... 

Sie können dies tun, ein paar Möglichkeiten - je nach Anwendung. Hier ist ein Beispiel mit 2 Schleifen - und ein anderes mit einer einzelnen Schleife.

Griffel

$fillColorArray = (#f06 pink) 
$textColorArray = (white #f06) 

remove-list-styles() 
    list-style: none 
    margin: 0 
    padding: 0 

.chart-list 
    remove-list-styles() 
    margin-bottom: 2rem 
    background: lightgray 
    .chart 
     padding: 1rem 

.chart-list.one 
    // 
    .chart 
     // 
     for fillColor, currentIndex in $fillColorArray 
      &:nth-of-type({currentIndex + 1}) 
       background: fillColor 
     for textColor, currentIndex in $textColorArray 
      &:nth-of-type({currentIndex + 1}) 
       span 
        color: textColor 

.chart-list.two 
    // 
    .chart 
     // 
     for fillColor, currentIndex in $fillColorArray 
      &:nth-of-type({currentIndex + 1}) 
       background: fillColor 
       span 
        color: $textColorArray[currentIndex] 

// &:nth-of-type(2n + {currentIndex + 1}) 
// if you want it to repeat at those intervals 
.chart-list.three 
    // 
    .chart 
     // 
     for fillColor, currentIndex in $fillColorArray 
      &:nth-of-type(2n + {currentIndex + 1}) 
       background: fillColor 
       span 
        color: $textColorArray[currentIndex] 

Answer 2

Sie können den Einzugsstil und den Klammerstil nicht in verschachtelten Blöcken mischen. Wenn Stylus einen Klammer-artigen Block sieht, wird angenommen, dass alle verschachtelten Blöcke innerhalb des Blockes ebenfalls mit Klammern sind.