CSS Sprite Workflow mit Compass und Sass

von

Schon vor einiger Zeit habe ich angefangen, Compass mit Sass zu benutzen. Die Vorteile dieses  CSS-Preprozessors wurden ja schon ausgiebig gefeiert, Neues zum Thema findet sich zb. bei The Sass Way. Was mir bisher völlig durch die Lappen ging, ist das Superfeature der automatischen Sprite Erstellung. Hier darauf gestoßen, dann gleich selbst ausprobiert – total simpel! Man braucht nur (eine Compass/Sass Installation vorausgesetzt) einen Ordner mit Png Icons zu befüttern und diesen in der SCSS Datei folgendermaßen als Cprite Ordner referenzieren:

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

Schon generiert Compass ein Sprite mit allen Bildern im Ordner. Pro Bild wird eine Ccc-Klasse zur Verfügung gestellt, die so heißt wie das Bild. Das Thema „CSS Sprite Workflow“ hat sich damit dann quasi bis auf null reduziert.

Kommentieren