Entwicklung & Design

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

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Schreib den ersten Kommentar!