Sass: »Semantische Raster« mit Hilfe von %placeholdern und @for-Schleifen

Von Jonas

In diesem Beitrag erfahrt ihr, wie mit Hilfe von Placeholdern semantische Grids auf Basis von Sass erstellt werden können.

Aktualisiert am 8. März 2023 Lesezeit ca. 4 Min. 2 Kommentare

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.

Links / Quellen

• Individuelle responsive Gridsysteme mit Sass
• Semantic grids with Sass Loops and Silent Placeholders

Geschrieben von Jonas

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, UX/UI und Frontend-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.

Jonas Hellwig bei Xing