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.
Written by Paul
Related protips
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Css
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#