SASS / SCSS – Pesquisa de índice em loops

No momento, SASS não suporta ‘hash’ | chave / valor | dicionário | estruturas de mapas (embora pareça que isso acontecerá em breve? ). Então, para ter uma implementação limpa de algo que você faria em Javascript, como:

var colors : { red: 'rgb(rr,gg,bb)', blue: 'hsl(hh,ss,ll)', ... }
function setBgColor($el, color) {
    $el.css('background-color', colors[color]);
}

em vez disso, você deve usar listas “emparelhadas”:

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

(Observe que omiti intencionalmente third)

Então, você pode usar o SASS @eachou o @forloop assim:

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

@for $i from 1 through length($list) {
  $item: nth($list, $i);

   .#{$item}-for {
        color: nth($colors, $i);
   }
  .btn-for-#{$i} { color: blue; } // not what you intend
}

Cada um resulta no “mesmo” CSS – tente no codepen , mas no momento não funciona no jsfiddle .

HTML de exemplo, para referência:

<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>