Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

t3n 27

CSS-Entwicklung: SASS im Einsatz

Seite 4 / 4

Bilder mit Compass

Auch für in CSS genutzte Bilder hat Compass einige Funktionen im Gepäck. So ergänzt Compass etwa mit der Funktion „image-url('datei.png')“ Dateinamen um den richtigen Pfad, den es ja über die Konfigurationsdatei kennt. Das spart Tipparbeit und ermöglicht, das Verzeichnis auch nachträglich noch zu verschieben. Zugegeben, letzteres ist ein eher seltener Anwendungsfall. Trotzdem lohnt der Einsatz, denn außerdem hängt Compass einen Zeitstempel an den Bilderpfad, um die Probleme durch Browser-Caching zu minimieren.

Compass erlaubt es auch, Bildinformationen auszulesen. Um etwa eine Grafik im Hintergrund einzubauen, eignen sich die Funktionen zum dynamischen Auslösen von Breite und Höhe. Auf diese Weise lassen sich später Grafiken austauschen, ohne eine Änderung am CSS-Code vornehmen zu müssen. Das ist bei einzelnen Grafiken zwar ein wenig hilfreich, wirklich lohnenswert wird es aber beispielsweise bei einer Logoübersicht oder einer Bildergallerie.

Hintergrundbilder dynamisch einpassen

.logo {
 background: image-url('logo.png');
 width: image-width('logo.png');
 height: image-height('logo.png');
}

CSS-Sprites mit Compass

Bei einer CSS-Sprite werden viele kleine Bilder zu einem einzigen zusammengefügt und anschließend in CSS über Hintergrund-Positionen angesteuert. So wird nicht für jede einzelne Datei eine Verbindung zum Server aufgebaut und die Ladezeit der Webseite dadurch beschleunigt.

Doch wer schon einmal CSS-Sprites für sein Projekt angefertigt hat, weiß, wieviel Aufwand das ist. Und richtig viel Spaß machen Sprites, wenn nachträglich Icons mitten in der Sprite geändert oder ersetzt werden sollen oder sich Dimensionen verändern.

Hier springt Compass in die Bresche und erleichtert solche Anpassungen. Da das Bilderverzeichnis bekannt ist, landen CSS-Sprites, also alle Grafiken, die zusammengefasst werden sollen, einfach in einem Unterordner darin (im Beispiel „icon“). Nun kann Compass eine Sprite erstellen und die notwendigen Klassen im Stylesheet erzeugen. Der Aufwand: zwei Zeilen.

Sprites in Compass

@import 'icon/*.png';
@include all-icon-sprites();

Compass lädt nun alle PNG-Dateien aus dem icon/-Verzeichnis ins Sprite (erste Zeile) und fügt die entsprechenden Klassen hinzu (zweite Zeile). Angenommen, das Sprite besteht aus drei Bildern – new.png, edit.png und delete.png –, so sieht die CSS-Ausgabe der zwei Zeilen entsprechend aus.

CSS-Ergebnis der Compass-Sprites

.icon-sprite, .icon-delete, .icon-edit, .icon-new {
 background: url('/images/icon-sd26f725180.png') no-repeat;
}
.icon-delete {
 background-position: 0 0;
}
.icon-edit {
 background-position: 0 -16px;
}
.icon-new {
 background-position: 0 -32px;
}

Nun also doch wieder auferlegte Klassennamen, die vorher bei den Layout-Frameworks mühsam beseitigt wurden? Auf keinen Fall. Mit einem Mixin lassen sich die einzelnen Grafiken der Sprite mit eigenen Selektoren verwenden. Ändern sich im Projektverlauf die Grafiken, ist dann nicht mehr nötig, als die einzelnen Icons auszutauschen. Den Rest erledigt Compass.

Eigene Namen für Compass-Sprites

.new { @include icon-sprite(new); }
.edit { @include icon-sprite(edit); }
.delete { @include icon-sprite(delete); }

Auf die Kompilatoren, fertig, los

SASS und Compass können große Hilfen im Alltag sein. Sie dienen dazu, Projekte übersichtlicher zu gestalten und die Wartung zu erleichtern. Doch die angerissenen Themen sind nur einige Ausgangspunkte für die eigene Arbeit mit Pre-Prozessoren. Weitere Schritte können Farbberechnungen sein oder durch die Nutzung von Bedingungen und Schleifen komplexe und projektspezifische Frontend-Lösungen, die das Leben des gemeinen Frontend-Entwicklers deutlich erleichtern. Wie viele der zur Verfügung stehenden Funktionen er dabei nutzen möchte, bleibt natürlich jedem selbst überlassen. Einen Blick sind die neuen Möglichkeiten aber allemal wert.

Andreas Dantz
Andreas Dantz

entwickelt Webseiten seit dem Ende der Frühzeit des Internets, arbeitet mit seinem Webdesignbüro „Vortrieb“ in Bremen für jeden, der bereit ist mit seiner Webseite etwas zu erreichen. Von kleinen lokalen Unternehmen bis zu großen Konzernen. In seiner Freizeit schreibt Andreas gerne Kurzbiografien in der dritten Person.

Startseite
  • Seite:
  • 1
  • 2
  • 3
  • 4

Bitte beachte unsere Community-Richtlinien

Schreib den ersten Kommentar!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden