Sass: @for-Schleife zur Berechnung von Klassen-Selektoren im Gestaltungraster

In klassenbasierten CSS-Grids wird die Breite der Spalten im Gestaltungsraster mit Hilfe von Klassen gesteuert. Einen ausführlichen Artikel zu diesem Thema habe ich bereits veröffentlicht. Frameworks wie Bootstrap nehmen euch Arbeit ab, indem sie u.a. die Klassen und die jeweilige Breite vordefinieren. Mit Hilfe der @for-Schleifen in Sass könnt ihr euch ein individuelles System entwickeln. In diesem Beitrag archiviere ich das entsprechende Snippet.

@for-Schleifen in Sass

Mit einer @for-Schleife kann eine Anweisung mehrfach abgearbeitet und bei jedem Schleifendurchlauf verändert werden. Die Anzahl der Schleifendurchläufe steuern wir in diesem Beispiel über die Variable $grid-columns. Die Iterationsvariable $i wird bei jedem Durchlauf um 1 erhöht.

Das folgende Beispiel zeigt den SCSS-Code für ein 6-spaltiges Gestaltungsraster. Als Präfix für die Klassen-Selektoren verwende ich hier exemplarisch den Ausdruck »kulturbanause«.

$grid-columns: 6;
  @for $i from 1 through $grid-columns {
    .kulturbanause-#{$i} {
        width: percentage($i / $grid-columns);
  }
}

Der kompilierte CSS-Code sieht so aus:

.kulturbanause-1 {
  width: 16.66667%;
}

.kulturbanause-2 {
  width: 33.33333%;
}

.kulturbanause-3 {
  width: 50%;
}

.kulturbanause-4 {
  width: 66.66667%;
}

.kulturbanause-5 {
  width: 83.33333%;
}
.kulturbanause-6 {
  width: 100%;
}

Einen ergänzenden Artikel zum Thema »Semantische Raster« findet ihr hier.

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 5 Kommentare

  1. Rafael Sobek
    schrieb am 08.04.2018 um 20:52 Uhr:

    Super. Danke für die Schleifenbeschreibung mitsamt des Beispiels.

    Antworten
  2. Gunnar Bittersmann
    schrieb am 13.05.2015 um 01:18 Uhr:

    Es gibt keine „CSS-Klassen“. Klassen sind ein Konstrukt in HTML, um die die Gleichartigkeit von Elementen abzubilden. Diese Gleichartigkeit macht man vorzugsweise am Inhalt fest, nicht an der Darstellung. Um diese Gleichartigkeit zu visualisieren, bedient man sich der Klassenselektoren in CSS.

    Wer „CSS-Klassen“ sagt, der meint: präsentationsbezogenes Markup. Also Inline-Styles. (Warum dann nicht gleich style-Attribute oder font-Elemente?) Inline-Styles widersprechen separation of concerns.

    In meinem Talk auf der From the Front 2014 [https://speakerdeck.com/gunnarbittersmann/css-preprocessors-for-the-best-of-both-worlds-from-the-front-2014] hab ich gezeigt, wie man mit Sass beides – wiederverwendbare Module im Stylesheet und nicht mit präsentationsbezogenen Klassen vollgemüllten HTML-Code – haben kann: mit Placeholdern. Nicht `.kulturbanause-1 {}`, sondern `%kulturbanause-1 {}`.

    Im HTML steht bspw. `<ul id=“foo“><li>…</li><li>…</li>…</ul>`. Keine Klassen an den li-Elementen! Um Listenelementen dieser Liste die Breite 1/6 zu geben, benutzt man diese wiederverwendbaren Module: `#foo > li { @extend %kulturbanause-1; }`.

    Anstatt mit 100% zu multiplizieren, kann man auch besser die sprechende Sass-Funktion `percentage()` verwenden. Statt `width: 100% / $grid-columns * $i;` also `width: percentage($i / $grid-columns);`.

    Bei der Einfachheit stellt sich dann aber schon die Frage, warum man das wegkapseln wollen sollte, um das dann „Grid-System“ nennen zu können. Man kann ja schließlich auch ganz einfach schreiben: `#foo > li { width: percentage(1/6) }`.

    TL;DR: Es gibt gute Anwendungen für `@for`-Schleifen in Sass. Die hier gezeigte ist eher keine solche.

    Antworten
    • Jonas Hellwig
      schrieb am 13.05.2015 um 08:30 Uhr:

      Hallo Gunnar, vielen Dank für deinen Kommentar. Ich bin nur teilweise deiner Meinung. Die Debatte bzgl. der Notwendigkeit von klassenbasierten Grid-Systemen etc. kommt jedes Mal auf, wenn das Thema zur Sprache kommt. Man könnte es mit Hilfe von Placeholdern oder semantischen Grids mit weniger Klassen lösen – wenn man wollte. Aber darum geht es in diesem Artikel nicht.

      Die percentage()-Funktion ist ein guter Hinweis. Auch wenn im Grunde exakt das selbe passiert ist es in der Tat hier schlauer direkt die Sass-Funktion zu nutzen. Ich habe das Beispiel dahingehend überarbeitet.

      Auch was das Wordings von »Klassen« bzw. »Klassen-Selektoren« betrifft habe ich den Beitrag noch einmal angepasst. Ich hatte gehofft, dass eine einheitliche Bezeichnung die Sache verständlicher macht. Aber sachlich korrekt ist natürlich wichtiger :)

      Antworten
    • Jonas Hellwig
      schrieb am 13.05.2015 um 15:39 Uhr:

      Ich habe einen »Follow Up« Artikel bzgl. der Placeholder-Thematik geschrieben. Sass: »Semantische Raster« mit Hilfe von %placeholdern und @for-Schleifen.

      Antworten
    • Gunnar Bittersmann
      schrieb am 16.05.2015 um 11:11 Uhr:

      Eine mögliche Anwendung für `@for`-Schleifen sind von der Viewportbreite abhängige Hintergrundbilder: http://sassmeister.com/gist/321dd6352ac6d3c52ff0 Obwohl sich dafür – wie auch gezeigt – die `@each`-Schleife anbietet.

      Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →