title: Generating selectors with Stylus loop
body: <p>In Stylus, I am trying to generate <code>:nth-of-type()</code> selectors based on a color array. This is actually my first time with arrays in stylus so I am a bit perplexed as per the semicolon- and bracket-free syntax I am seeing in <a href="https://stackoverflow.com/questions/21438331/does-stylus-support-arrays-of-variables">examples</a>.</p>
  
  <p>The goal is to have an equivalent of the following:</p>
  
  <pre><code>.chart {
    li {
      display: flex;
      align-items: flex-end;
  
      &amp;:nth-of-type(1) {
        background-color: #FFE3A9;
        span {
          background-color: #FFCC66;
        }
      }
      &amp;:nth-of-type(2) {
        background-color: #FCCCA2;
        span {
          background-color: #F79850;
        }
      }
    }
  }
  </code></pre>
  
  <p>My attempt:</p>
  
  <pre><code>bg_colors = (#FFEDA9 #FDCCA2)
  fill_colors = (#FFCD66 #FD9850)
  
  .chart {
    li {
      display: flex;
      align-items: flex-end;
  
      for num in range(0, 1)
        &amp;:nth-of-type({num})
          background-color: bg_colors[num]
          span
            background-color: fill_colors[num]
    }
  }
  </code></pre>
  
  <p>I am getting compilation errors from an unexpected <code>}</code> (angular cli) so I am wondering where my syntax is wrong.</p>