W celu wygenerowania spritów potrzebny będzie compass (SASS framework). 

O tyle jest ta metoda wygodna, gdyż będzie uwzględniać wszystkie obrazki z danego folderu.

Demo generowanie spritów poprzez SASS

 

gem install compass

Po zainstalowaniu compass-a należy jeszcze utworzyć nasz projekt

compass create myapp

Z uwagi, że korzystam z Netbeans nie robię tego, a odpowiednio konfiguruje preprocessor CSS.

(Project properities) [CSS Preprocessors] : Compiler Options "--compass"

Wygenerować sprity możemy dwoma metodami.

1. Automatycznie poprzez "all-foldername-sprites"

@import "myfoldername/*.png";
@include all-myfoldername-sprites;

lub

2. Pseudoautomatycznie porzez "sprite-map"

$icons: sprite-map("myfoldername/*.png");
i {
    background: $icons;
    display: inline-block;
    vertical-align: middle;
}
@each $i in sprite_names($icons){
    .icn-#{$i} {
        background-position: sprite-position($icons,$i);
        @include sprite-dimensions($icons,$i);
    }
}

Uwaga

W obu przypadkach konieczne aby był utworzony folder "images". Przykładowa ścieżka do wygenerowanego sprita będzie "/mojproject/images/myfoldername-randomstr.png", przy czym folder z obrazkami znajdować się będzie w "/mojproject/images/myfoldername"