Sprites mit Drupal 7, Sasson und Compass

BLOG

Automatische Erstellung von Sprites mit dem Drupal Theme sasson bzw. compass.

In diesem Tutorial zeige ich wie man auf sehr einfache Art und Weise CSS Sprites erstellen kann. Jeder der schon mal Sprites per Hand erstellt hat weis wie aufwängig es ist die richtigen Positionierungen zu machen. Besonders wenn man sehr viele Grafiken hat. Voraussetzung ist die Verwendung von sasson als Base-Theme. Funktioniert aber auch ähnlich direkt mit compass.

In diesem Beispiel verwende ich verschiedene Icons zum kennzeichnen von unterschiedlichen Datentypen in einem Upload Feld.

So wird das Endergebnis aussehen:

Der große Vorteil von compass ist nun das man sich die Erstellung der Sprites Grafik erspart (man kann die einzelnen Grafiken einsetzten) und auch die Positionierung wird übernommen.

Compass kommt mit drei verschiedenen Methoden

vert - für vertikale Anordnung
horz - für Horizontale Anordnung
smart - habe ich selber noch nicht ausprobiert ...

In meinem Beispiel verwende ich die Vertikale Anordnung.

Zuerst bindet man die Sprite-Funktion in der Scss Datei ein:

 

@import "sprites/vert";

 

Dann werden die Ordner unter /Sprites angelegt in welches die Grafiken kopiert werden. Aus jedem Verzeichnis innerhalb von /Sprites wird eine separate Sprite Grafik erstellt, man kann beliebig viele Verzeichnisse anlegen. Wie erwähnt werden Horizontale Sprite Grafiken erzeugt wenn "horz" im Verzeichnisnamen vorkommt, Vertikale bei "vert" und Smart bei allen anderen.

Und schon kann's losgehen. Hier beispielhaft wie ein Icon in der scss Datei eingebunden wird:

 

a[type^="application/psd"] { @include sprite-vert-01_Adobe_PSD; @include file-icons-basics; }

 

Und so sieht der generierte Code aus (wobei eigentlich nur die erste Zeile relevant ist):

 

.file a[type^="image/x-photoshop"] { background: url("/mypath/sprites/vert-sprite.png?v=957") 0px -308px no-repeat; display: inline-block; vertical-align: top; line-height: 30px; padding-left: 36px; width: 174px; }

 

Mit dieser sehr leichten Methode hat man eine Arbeit die gerne mal über eine Stunde schlucken kann in ein par Minuten erledigt. Da die Sprite Funktion ein Bestandteil von Compass ist funktioniert das ganze natürlich auch ohne sasson.