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

Zugriff auf Eltern-Elemente

Manchmal reicht die einfache Verschachtelung in die Tiefe nicht aus. Denn auch der umgekehrte Weg, also der Zugriff auf das übergeordnete Element, ist gelegentlich notwendig.

Herkömmliche Verschachtelung ohne Eltern-Zugriff

a {
 :link, :visited { ... }
 :hover, :focus { ... }
}

Das Ergebnis dieses Beispiels enthält ein unschönes Leerzeichen zwischen den Elementen im Selektor, was für die Definition von Links falsch ist. Mit dem Et-Zeichen (auch: kaufmännisches Und) fällt dieses Leerzeichen weg und der direkte Zugriff auf das Eltern-Element ist möglich.

Zugriff auf das Eltern-Element

a {
 &:link, &:visited { ... }
 &:hover, &:focus { ... }
}

In dieser Anwendung ist das nur wenig sinnvoll, da die ausgeschriebene CSS-Syntax kürzer ist als der SASS-Code. An anderer Stelle kann dieser Selektor aber durchaus hilfreich und sein Einsatz entsprechend nützlich sein.

Modernizr

Etwa beim Einsatz von Modernizr. Dieser erweitert das HTML-Element der Webseite um eine Vielzahl an Klassen, die anzeigen, welche modernen Funktionen der Browser mitbringt. Zum Beispiel weisen „.cssgradients“ oder eben „.no-cssgradients“ darauf hin, ob ein Browser Farbverläufe mit CSS unterstützt.

Hebt sich eine Box etwa nur durch einen Schatten vom Hintergrund ab, kann ein Fallback für ältere Browser notwendig sein. Hier kommt der Parent-Selektor mit dem "&" sehr gelegen.

Da der Eltern-Selektor an beliebiger Stelle einsetzbar ist, bleiben die Definition und das Fallback beisammen. Das hilft gerade in größeren Projekten mit vielen Frontend-Entwicklern oder bei solchen, die regelmäßige Wartung erfordern. In einer fernen Zukunft, in der Fallbacks wegen durchgängiger Browserunterstützung nicht mehr notwendig sind, entfernt man sie einfach wieder. Sie sind ja leicht zu finden.

Fallback dank Modernizr

.message {
 boxshadow: 1rem 1rem 1rem rgba(0, 0, 0, 0.5);
 .no-boxshadow & {
 border: 5px solid#CCC;
 }
}

Semantische CSS-Frameworks

Das größte Problem an CSS-Frameworks ist das Markup. Ob 960gs [3], YAML [4] oder eines der unzähligen anderen Frameworks – die nötigen CSS-Klassen im HTML-Code sind semantisch nicht sinnvoll und dienen ausschließlich der Präsentation. Denn die Klasse „.grid_2“ im 960gs sagt genausowenig über den Inhalt aus wie „.ym-col3“ in YAML.

Compass ergänzt SASS um viele praktische Funktionen.
Compass ergänzt SASS um viele praktische Funktionen.

Bitte beachte unsere Community-Richtlinien

Schreib den ersten Kommentar!

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

Jetzt anmelden