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 3 / 4

Durch das Nutzen von SASS lässt sich das Frontend-Pferd andersherum aufzäumen. So lassen sich Klassen und IDs ganz nach eigenem Geschmack und gegebenem Inhalt vergeben und mit den (Grid-) Frameworks verknüpfen. Soll der Inhaltsbereich beispielsweise in einem Grid zehn Spalten einnehmen, so verzichtet man im Markup auf „<div class=„content grid_10“>“. Stattdessen bleibt es bei „<div class=„content“>“ und die entsprechenden Auszeichnungen werden über das Stylesheet zugewiesen.

CSS-Klassen einheitliche Namen zuweisen

.content {
 @include grid_10;
}

So bleibt das Markup sauber. Doch für jede Grid-Klasse eine SASS-Zuweisung zu schreiben, widerspricht der Logik geringeren Aufwands. Dank der Rechenfunktionen in SASS lassen sich diese aber auch in einem Mixin vereinen, das die Positionsberechnung durchführt.

Das folgende Beispiel ist natürlich sehr vereinfacht, es fehlen die Abstände zwischen den Spalten in der Berechnung und alles was sonst noch daran hängt. Doch dank derart dynamischer Berechnungen lässt sich etwa das Framework 960gs auf 100 Zeilen SASS eindampfen [5].

Ein einfaches Grid-System

$grid-width: 960px;
$num-columns: 12;
@mixin grid($column) {
 $column-width: $grid-width / $num-columns;
 width: $column * $num-columns;
}

Alternativ gibt es auch Grid-Systeme, die von Anfang an auf genau dieser Idee beruhen und direkt für die Nutzung mit Pre-Prozessoren entwickelt wurden, etwa Semantic.gs [6]. Diese Logik führt dann auch dazu, nicht mit Klassen in HTML zu gestalten, sondern stattdessen dort zu gestalten, wo es auch sinnvoll ist: in CSS.

Compass

Das auf 100 Zeilen SASS eingedampfte 960gs ist – zugegeben – kein pures SASS. Es handelt sich dabei um ein Compass-Plugin [7]. Compass ist ein CSS-Projekt-Framework; ganz im Gegensatz zu Layout-Frameworks wie 960gs. Projekt-Frameworks legen SASS sozusagen tiefer und schrauben Spoiler dran. Wofür? Um die Arbeit zu erleichtern.

Compass speichert dafür seine Einstellungen in einer Datei, der config.rb, im Wurzelverzeichnis des Projekts. Darin sind sämtliche Pfade zu relevanten Unterverzeichnissen, etwa dem für Bilder, CSS und JavaScript, abgelegt. So kann Compass direkter bei der Arbeit mit einem Projekt unterstützen, als dies ein einfacher CSS-Pre-Prozessor kann.

Mixins in Compass

Compass bringt bereits zahlreiche Mixins mit. Nach der Installation genügt deshalb ein „@import „compass“;“ am Dateianfang, um unzählige Mixins für zahlreiche CSS3-Funktionen nutzbar zu machen.

Egal ob „border-radius(3px)“, „box-flex(3)“ oder „background-size(100% auto)“ – um Prefixe kümmert sich fortan Compass. Entsprechend gilt die Faustregel, dass CSS3-Anweisungen in „@include anweisung(wert);“ umgeschrieben werden können. Die nötigen Vendor-Prefixe liefert Compass.

Verläufe in Compass

Einen Schritt weiter als das einfache Voranstellen von Browsernamen geht es bei der Nutzung von Verläufen in Hintergründen. Auch hier gibt es einige ältere Browser, die noch eine andere Syntax nutzen. Doch auch diese Variation übernimmt Compass. So lässt sich auch hier mit einer einfachen Schreibweise die Syntax aller Browser abdecken.

Hintergrund-Verläufe mit Compass

header {
 @include background(
 linear-gradient(top left, #333, #0C0),
 radial-gradient(#C00, #FFF 100px)
 );
}

Bitte beachte unsere Community-Richtlinien

Schreib den ersten Kommentar!

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

Jetzt anmelden