Image Sprites mit Compass einfach erstellen

Es ist nicht nötig eine Datei zu erstellen sie sämtliche Icons enthält. Und man braucht diese auch nicht mittels background-position zu positionieren. Man weist einfach den einelnen Elementen die Bilder zu, also ob man ohne Sprites arbeitet. Compass genereiert daraus dann eine Sprite Datei.

Zuerst erstellt man einen Ordner "meine-icons" im definierten Stammordner für Bilder. Der Stammordner sollte in der config.rb im Themes Ordner deiniert sein. (images_dir = "images"). 
In diesem fall erstellt man also images/meine-icons

Wichtig ist das der Name des Ordners im CSS Code verwendet wird. Zudem sollte der Ordner NICHT "sprites" oder ähnliches heißen, dies führt zu Konflikten mit der Compass Funtkion.

In den Ordner kopieren wir unsere einzelnen Sprite Images. z.B. icon-1, icon-2, icon-3, usw.

Nun muss noch die Compass Funtkion in einer der SCSS Dateien eingebunden werden und der vorhin erstellte Ordner zugewiesen werden:

@import 'compass/utilities/sprites';
@import "meine-icons/*.png";

Als letzen Schritt weißt man die Bilder den Elementen zu:

Man nimmt also den Namen des Orders wo sich die Bilder befinden und hängt "-sprites" dahinter in Klammern dann der Dateiname des Icons ohne Extension. Wichtig ist das alle Icons das gleiche Dateiformat haben müssen. In diesem Beispiel PNG.

Mehr dazu gibt es hier: compass-style.org/help/tutorials/spriting

Ein kleiner Hinweis zu den Customization Options. z.B. $icon-spacing: 20px (damit wird ein Weißraum um die Icons von 20px erstellt - hilfreich da diese sonst zu dicht aneinander kleben.) MUSS vor @import "icons/*.png"; stehen damit es funktioniert.