Optimized function to generate sprites with Compass in Sass

Generates automatically new classes width background position, height and width in the type of: icn-FILENAME. All that is needed is dropping .png files in the folder icons inside images in the project-folder and a new sprite with new classes will be generated automatically. For adding whitespace see http://compass-style.org/help/tutorials/spriting/customization-options/

@import "compass";

$icons: sprite-map("icons/*.png");

i {
	background: $icons {
  	display: inline-block;
	}
}
 
@each $i in sprite_names($icons) {
   .icn-#{$i} {
     background-position: sprite-position($icons, $i);
     @include sprite-dimensions($icons, $i);
   }
 }

Add your comment