Social Icons in Sass using @each

Below we have a very easy SASS mixin for generating a list of icons based on a list of network that match your icon filenames using @each. Using modernizr to utilise the .svg class with a .png fallback.

// List the network names
$networks: twitter facebook skype dribbble gplus

// generate the svg version
=svg-icons
@each $icon in $networks
    .#{$icon}
    background: image-url("svg/#{$icon}.svg") no-repeat

// png fallback
=png-icons
  @each $icon in $networks
    .#{$icon}
    background: image-url("png/#{$icon}.png") no-repeat

// output the css
.svg .social
  +svg-icons 

.social
  +png-icons

would output:

.svg .social .twitter {
  background: url('/img/svg/twitter.svg') no-repeat;
}
.svg .social .facebook {
  background: url('/img/svg/facebook.svg') no-repeat;
}
.svg .social .skype {
  background: url('/img/svg/skype.svg') no-repeat;
}
.svg .social .dribbble {
  background: url('/img/svg/dribbble.svg') no-repeat;
}
.svg .social .gplus {
  background: url('/img/svg/gplus.svg') no-repeat;
}
// png fallbacks
.social .twitter {
  background: url('/img/png/twitter.png') no-repeat;
}
.social .facebook {
  background: url('/img/png/facebook.png') no-repeat;
}
.social .skype {
  background: url('/img/png/skype.png') no-repeat;
}
.social .dribbble {
  background: url('/img/png/dribbble.png') no-repeat;
}
.social .gplus {
  background: url('/img/png/gplus.png') no-repeat;
}

Im sure theres room for optimisation of the above so please do share your tips / remakes and let me know what you think.

Just a slice of things that can be done using SASS for your stylesheets.