Sass: »Semantische Raster« mit Hilfe von %placeholdern und @for-Schleifen
In diesem Beitrag erfahrt ihr, wie mit Hilfe von Placeholdern semantische Grids auf Basis von Sass erstellt werden können.

An klassenbasierten Rastern wird häufig kritisiert, dass das HTML-Markup durch eben jene Klassen unnötig aufgebläht wird. In einem sog. »semantischen Raster (semantic Grid)« kann auf diese Klassen verzichtet werden, da im Stylesheet die gewünschte Spaltenbreite einem Selektor direkt zugewiesen wird. Grundsätzlich ist diese Vorgehensweise auch mit reinem CSS denkbar, doch ohne den Einsatz eines Präprozessors wie Sass ist der Aufwand bei der Erstellung und der Pflege des Dokuments viel zu hoch. In diesem Beitrag möchte ich die elementare Funktionsweise von semantischen Rastern auf Basis von Sass beschreiben.
Semantische Raster vs. klassenbasierte Raster
In einem klassenbasierten Raster werden im CSS-Dokument Klassen-Selektoren definiert, die die Breite von Spalten festlegen. Im HTML-Code werden diese Klassen dann dem gewünschten Element hinzugefügt. Das sieht i.d.R. etwa so aus:
.columns { float:left; padding: 0 1em; }
.width-1-4 { width:25%; }
.width-2-4 { width:50%; }
.width-3-4 { width:75%; }
.width-4-4 { width:100%; }
<header class="site-header width-4-4 columns"></header>
<article class="site-content width-3-4 columns"></article>
<aside class="site-sidebar width-1-4 columns"></aside>
<footer class="site-footer width-4-4 columns"></footer>
Wie unschwer zu erkennen ist, befinden sich nun recht viele Klassen im HTML-Code, was mitunter kritisiert wird, aber nicht grundsätzlich dramatisch ist. Dennoch gibt es eine schlankere Lösung, die sog. semantischen Grids. Beachtet bitte, dass der Ausdruck »semantisch« in diesem Zusammenhang zwar üblich, aber nicht treffend ist. Klassen im HTML-Dokument besitzen keine semantische Bedeutung. Allerdings kann man darüber diskutieren, ob Klassen zur Steuerung des Raster-Verhaltens sinnvoll sind.
Bei einem semantischen Grid sieht der CSS-Code eher so aus:
.site-header, .site-content, .site-sidebar, .site-footer {
float: left;
padding: 0 1em;
}
.site-header, .site-footer {
width: 100%;
}
.site-sidebar {
width: 25%;
}
.site-content {
width: 75%;
}
Das HTML-Markup ist in diesem Beispiel erfreulich schlank:
<header class="site-header"></header>
<article class="site-content"></article>
<aside class="site-sidebar"></aside>
<footer class="site-footer"></footer>
Da nun die Breite der Elemente direkt im jeweiligen Selektor definiert wird, und zusätzlich auch noch Eigenschaften von mehreren Selektoren geteilt werden, ist es ohne einen Präprozessor kaum denkbar das Dokument zu pflegen. An dieser Stelle kommt Sass ins Spiel.
Semantische Raster mit Sass
Um das oben gezeigte Beispiel nun mit Hilfe von Sass zu erzeugen, kann folgender Code verwendet werden. Zunächst erstellen wir eine Variable für die maximale Anzahl an Rasterspalten.
$grid-columns: 4;
Als nächstes erzeugen wir einen Placeholder (%column
) für die Eigenschaften die jeder Spalte zugewiesen werden sollten. Placeholder haben in Sass den Vorteil, dass sie nicht direkt kompiliert werden, sondern erst, wenn mittels @extend
ein Selektor um die Eigenschaften des Platzhalters erweitert wurde. Das spart häufig ein paar Zeilen Code.
%column {
float:left;
padding:0 1em;
}
Jetzt folgt die @for
-Schleife, die ich bereits in diesem Beitrag erläutert habe. Die Schleife wird so oft durchlaufen, wie das Raster Spalten bekommen soll. Somit erzeugen wir weitere Placeholder mit dem Präfix width
. Jeder dieser Placeholder besitzt nun die gemeinsamen Eigenschaften aus dem Placeholder %column
, sowie eine individuelle Breite.
@for $i from 1 through $grid-columns {
%width-#{$i}-#{$grid-columns} {
@extend %column;
width: percentage($i / $grid-columns);
}
}
Die Berechnung der Placeholder ist nun abgeschlossen. Jetzt können wir, ebenfalls über @extend
, die gewünschten Eigenschaften zuweisen.
.site-header {
@extend %width-4-4;
}
.site-content {
@extend %width-3-4;
}
.site-sidebar {
@extend %width-1-4;
}
.site-footer {
@extend %width-4-4;
}
Vollständiges Beispiel
Der vollständige Code sieht demnach so aus:
$grid-columns: 4;
%column {
float:left;
padding:0 1em;
}
@for $i from 1 through $grid-columns {
%width-#{$i}-#{$grid-columns} {
@extend %column;
width: percentage($i / $grid-columns);
}
}
.site-header {
@extend %width-4-4;
}
.site-content {
@extend %width-3-4;
}
.site-sidebar {
@extend %width-1-4;
}
.site-footer {
@extend %width-4-4;
}
Der kompilierte CSS-Code sieht so aus:
.site-sidebar, .site-content, .site-header, .site-footer {
float: left;
padding: 0 1em;
}
.site-sidebar {
width: 25%;
}
.site-content {
width: 75%;
}
.site-header, .site-footer {
width: 100%;
}
Bitte beachtet, dass ich in diesem Beispiel nur die grundlegende Funktionsweise von »semantischen Rastern« mit Hilfe von @for
-Schleifen und Placeholdern beschrieben habe. Ein komplexes Raster bietet deutlich mehr Möglichkeiten. Alternativ zu Placeholdern und @extend
, werden häufig auch Mixins (@include
) verwendet.
Hallo Jonas,
erstmal herzlichen Dank für dein Tutorial.
Du schreibst oben: „Grundsätzlich ist diese Vorgehensweise auch mit reinem CSS denkbar, doch ohne den Einsatz eines Präprozessors wie Sass ist der Aufwand bei der Erstellung und der Pflege des Dokuments viel zu hoch“
Sorry, aber das leuchtet mir gerade überhaupt nicht ein. Bin ganz auf deiner Seite „semantischere“ Grids aufzubauen, aber wie genau meinst du die Aussage „viel zu hoch“?
Letzten Endes konstruiert Sass doch den gleichen CSS code. Und letztlich musst du ja den HTML Elementen ebenfalls eine entsprechende Klasse zuweisen und arbeitest in zwei Dateien.
„Placeholder haben in Sass den Vorteil, dass sie nicht direkt kompiliert werden, sondern erst, wenn mittels @extend ein Selektor um die Eigenschaften des Platzhalters erweitert wurde. Das spart häufig ein paar Zeilen Code.“
=> Das leuchtet schon ein, aber in diesem Fall wird ja kein Code gespart..
„…Mit Hilfe der Placeholder kann die Breite einem Element (z. B. der Sidebar) direkt zugewiesen werden.“
=> Das mache ich doch sonst auch einfach in der CSS Datei
Mir leuchten die Vorteile da jetzt (noch) nicht ein. Ich sags mal so, das habe ich doch dreimal so schnell im CSS geschrieben, als mit Sass über eine Schleife generiert.
Ausser gewissen Mixins kann ich mich mit Sass irgendwie noch nicht so richtig anfreunden.. ;-
Beste Grüße, Stefan
Hallo Stefan, ähnlich wie klassenbasierte Grids ist auch der hier beschriebene SCSS-Ansatz mittlerweile durch Flexbox und Grid weitestgehend abgelöst worden. Unabhängig davon aber zu deinen Fragen:
Ja da hast du Recht, Sass macht an einigen Stellen schon Sinn. Vielen Dank für deinen Support!
…oder einfach so:
[class*=column-] { float:left; padding: 0 1em; }
.column-1 { width:25%; }
.column-2 { width:50%; }
.column-3 { width:75%; }
.column-4 { width:100%; }
Genau diese Klassen-Selektoren sollen ja nicht erzeugt werden. Mit Hilfe der Placeholder kann die Breite einem Element (z. B. der Sidebar) direkt zugewiesen werden.