title: Accessing an array key in SASS
body: <p>I have a list in SASS, and I'm trying to access on of the items by using bracket notation:</p>
  
  <pre><code>$collection[1];
  </code></pre>
  
  <p>but that gives me an error.</p>
  
  <p>Is there any other way to do this?</p>
  
  <hr>
  
  <p><strong>Why do I want to do this?</strong></p>
  
  <p>I have a list of colors that have to be set on different elements according to a colors assigned to them by the server. The markup has numbered classes (<code>color-0</code>, <code>color-1</code>, etc.). Here's the CSS I'm aiming for:</p>
  
  <pre class="lang-css prettyprint-override"><code>.color-0 { color: red }
  .color-1 { color: orange }
  .color-2 { color: green }
  .color-3 { color: blue }
  /* many more, with more complex colors... */
  </code></pre>
  
  <p>Instead of writing it all by hand, I figured I could use a SASS collection with a loop:</p>
  
  <pre><code>$color-collection: ('red', 'orange', 'green', 'blue');
  $color-count: length($color-collection);
  
  @for $i from 0 to $color-count {
      .color-#{$i} {
          color: $color-collection[ $i ];
      }
  }
  </code></pre>
  
  <p>but this just gives me the following error:</p>
  
  <blockquote>
    <p>Syntax error: Invalid CSS after "...color-collection": expected ";", was "[ $i ];"</p>
  </blockquote>
  
  <hr>
  
  <p><strong>How can I accomplish this?</strong></p>