Sass @each loop examples

each.css.scss

// Standard loop

@each $item in web, design, strategy, development, video, marketing {
  &#wwd-#{$item} {
    background-image: url('bg-wwd-#{$item}.jpg');
  }
}

// Multi-dimensional loop

a {
  background: image-url('icons/social-media-sprite.png') no-repeat;
  display: block;
  height: 15px;
  width: 15px;
  @include hide-text;

  $network-sprite-map: facebook 5px 0, twitter -26px 0, instagram -57px 0, youtube -87px 0;

  @each $pair in $network-sprite-map {
    &.#{nth($pair, 1)}-icon {
      background-position: #{nth($pair, 2)} #{nth($pair, 3)};
    }
  }
}