Social Icons in Sass using @each
by Roy Barber, 30th Septhember 2012Below 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.