SCSS - index lookup in loops

Different styles of "hash" lookups using lists. As of 2013-02-01 this does not work in JSFiddle, but does work when compiled in Visual Studio with Mindscape Web Workbench. Also works fine in Codepen http://codepen.io/zaus/pen/EcbIf See GitHub issue - https://github.com/nex3/sass/issues/132

by drzaus

HTML

<h1>For</h1>
<ul>
  <li class="first-for">the first item</li>
  <li class="second-for">the second item</li>
  <li class="third-for">the third item</li>
  <li class="fourth-for">the fourth item</li>
</ul>


<ul>
  <li class="btn-for-0">the zeroth item</li>
  <li class="btn-for-1">the first item</li>
  <li class="btn-for-2">the second item</li>
  <li class="btn-for-3">the third item</li>
  <li class="btn-for-4">the fourth item</li>
</ul>

<h1>Each</h1>

<ul>
  <li class="first-each">the first item</li>
  <li class="second-each">the second item</li>
  <li class="third-each">the third item</li>
  <li class="fourth-each">the fourth item</li>
</ul>

<ul>
  <li class="btn-each-0">the zeroth item</li>
  <li class="btn-each-1">the first item</li>
  <li class="btn-each-2">the second item</li>
  <li class="btn-each-3">the third item</li>
  <li class="btn-each-4">the fourth item</li>
</ul>

SCSS

$list: 'first', 'second', 'fourth';
$colors: red blue green brown;

@each $item in $list {
    $i: index($list, $item);
   .#{$item}-each {
        color: nth($colors, $i);
   }
  .btn-each-#{$i} { color: red; }
}

@for $i from 1 through length($list) {
  $item: nth($list, $i);
  
   .#{$item}-for {
        color: nth($colors, $i);
   }
  .btn-for-#{$i} { color: blue; }
}