kulturbanause Blog

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

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

Sass @for-Loop

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.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, Sketch, Adobe XD …

Jetzt Frühbucher-Rabatte sichern!

@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.

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

5 Kommentare

  1. Gunnar Bittersmann

    Verfasst am 13. Mai 2015 um 1: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.

    • Jonas Hellwig

      Verfasst am 13. Mai 2015 um 8: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 :)

    • Jonas Hellwig

      Verfasst am 13. Mai 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.

    • Gunnar Bittersmann

      Verfasst am 16. Mai 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.

  2. Rafael Sobek

    Verfasst am 8. April 2018 um 20:52 Uhr.

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

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.