Sass multiple @each workaround

No Sass 3.3, a @eachdiretiva permite que você itere por meio de listas de listas, assim:

.social {
    @each $social-network, $color in (facebook, #3b5998), (twitter, #00acee), (google-plus, #dd4b39) {
      .#{$social-network} {
        color: $color;
      }
    }
  }

Mas se você não tiver o suporte 3.3 (como no caso do libsass), existe uma solução alternativa. Você pode configurar variáveis ​​de matriz e iterar por meio de seus valores na @eachdiretiva.

$social-icons: (facebook, #3b5998), (twitter, #00acee), (google-plus, #dd4b39);
@each $val in $social-icons {
  $social-network: nth($val, 1);
  $color: nth($val, 2);
  .#{$social-network} {
    color: $color;
  }
}

Eu escrevi sobre isso originalmente no eichefam.net .