No Sass 3.3, a @each
diretiva 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 @each
diretiva.
$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 .