Ícones sociais no Sass usando @each

Abaixo, temos um mixin SASS muito fácil para gerar uma lista de ícones com base em uma lista de rede que corresponde aos seus nomes de arquivo de ícone usando @each. Usando modernizr para utilizar a classe .svg com um substituto .png.

// 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

produziria:

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

Tenho certeza de que há espaço para otimização dos itens acima, então, compartilhe suas dicas / remakes e me diga o que você achou.

Apenas algumas coisas que podem ser feitas usando o SASS para suas folhas de estilo.