Last Updated: February 25, 2016
·
755
· peiche

Sass multiple @each workaround

In Sass 3.3, the @each directive allows you to iterate through lists of lists, like so:

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

But if you don't have 3.3 support (as in the case of libsass), there is a workaround. You can set up array variables and iterate through their values in the @each directive.

$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;
  }
}

I originally wrote about this on eichefam.net.