Ich weiß nicht, wann ich angefangen habe, Sass zu verwenden. Mein erster Blogbeitrag zu diesem Thema stammt aus dem Jahr 2012. Es gibt viele Funktionen, für die ich an Sass liebe und eine von ihnen ist die Verschachtelung von Regeln.

Was ist Verschachtelung in Sass?

Ein typisches Beispiel dafür, wann Verschachtelung wirklich nützlich sind, ist der Umgang mit CSS-Selektoren von Elementen, die in der Regel Kinder von anderen Elementen sind. Ungeordnete Listen, die für Navigationsmenüs verwendet werden, sind hier ein gutes Beispiel:

nav {
	ul {
		list-style: none;

		ul {
			display: block;
		}
	}

	li {
		display: inline-block;
	}

	a {
		display: block;
		padding: 5px 10px;
	}
}

In diesem Code haben wir einige Kind- (oder Enkel-) Knoten eines <nav> Tags. Wenn wir nun einen Präprozessor wie Sass verwenden, erhalten wir für diese Verschachtelung das folgende Ergebnis im kompilierten CSS:

nav ul {
  list-style: none;
}
nav ul ul {
  display: block;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 5px 10px;
}

Viele von euch werden wahrscheinlich zustimmen, dass der Sass-Code einfacher zu schreiben und zu ändern ist, da wir nicht den gesamten CSS-Selektor schreiben müssen. Das Umstellen der Verschachtelung ist wirklich einfach, verglichen mit dem Ersetzen der mittleren Teile von langen CSS-Selektoren. Die Selektoren, die ich oben ausgewählt habe, sind recht kurz. Das ist Absicht, denn ihr solltet nicht zu viel verschachteln, nur weil ihr es könnt, oder noch schlimmer, weil es euer HTML abbildet. Wahrscheinlich brauchen wir keinen CSS-Selektor wie „nav ul li a„, denn wenn wir nur jeden Link in der Navigation stylen wollen, reicht es aus etwas wie „nav a“ zu haben.

Wie kann man Verschachtelungen ohne Präprozessor verwenden?

Wenn wir versuchen, diesen schön verschachtelten Code in einer .css-Datei zu verwenden, könnte es einfach funktionieren. Ganz ohne einen Präprozessor zu verwenden. Viele aktuelle Browser unterstützen die oben gezeigt Syntax.

Wenn ihr aber noch einen Browser unterstützen müsst, der diese neue Spezifikation nicht implementiert hat und diese Syntax nicht versteht, dann müsst ihr den Code etwas abändern. Bei diesen Browsern müsst ihr nur ein & vor jedem verschachtelten Selektor hinzufügen. Der obige Code sieht dann folgendermaßen aus:

nav {
	& ul {
		list-style: none;

		& ul {
			display: block;
		}
	}

	& li {
		display: inline-block;
	}

	& a {
		display: block;
		padding: 5px 10px;
	}
}

Glücklicherweise haben alle großen Browser diese neue Spezifikation implementiert, bei der ihr das & nicht vor den verschachtelten Selektoren hinzufügen müssen. Sie unterstützen aber auch die alte Syntax. Wenn ihr also auf Nummer sicher gehen wollt, können ihr noch für einige Zeit die alte Syntax verwenden. Ich kann auch sehr empfehlen, in der Dokumentation ein wenig mehr über CSS-Verschachtelungen nachzulesen.

Fazit

Das war’s! Verwenden einfach Verschachtelungen wie in Sass, Less und anderen Präprozessoren und moderne Browser werden euren Code problemlos verstehen. Wenn ihr noch zusätzlich einen Präprozessor für andere Dinge wie Variablen verwenden, wird dieser diese Syntax trotzdem in die normalen „langen CSS-Selektoren“ kompilieren.

Mit den CSS Custom Properties (Variablen) und der Verschachtelung sind nun zwei von drei Funktionen nativ in CSS enthalten, die ich in Sass häufig verwende. Die letzte ist das „Templating“ mit mehreren Dateien für verschiedene Teile/Komponenten. Der Rest wie Mixins sind mehr „nice to have“ für mich, aber nicht wirklich wichtig.