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 utilize 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.