kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

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

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.

Workshops und Seminare von kulturbanause

Unsere Seminar-Termine für 2018 sind online!

Visual Prototyping, Responsive Design, WordPress, Adobe Muse, HTML & CSS, Website-Optimierung …

Jetzt Frühbucher-Preise sichern!

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

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

2 Kommentare

  1. PureCSS

    Verfasst am 15. Mai 2015 um 14:22 Uhr.

    …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%; }

    • Jonas Hellwig

      Verfasst am 17. Mai 2015 um 11:03 Uhr.

      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.

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.