Webdesign mit SCSS & SASS
Der effiziente Einsatz von SCSS / SASS ist für Webdesigner immer wichtiger - Für Teilnehmer unserer Webdesign Professional-Kurse wollen wir hiermit eine kleine Anleitung zum effizienten Einsatz von scss / sass zur Verfügung stellen.
Funktionsweise von SCSS - Präprozessing mit Sass
Beim Arbeiten mit Sass werden Stylesheets in einer scss-Datei erstellt, die danach mit einem Sass-Processor "kompiliert" und anschließend als css-Datei ausgegeben werden. Beim Erstellen der Stylesheets in der scss-Datei ergeben sich einige spezielle SCSS-Funktionen und Anwendungs-Möglichkeiten, auf die wir nachfolgend näher eingehen werden - zuvor aber beschäftigen wir uns mit der nötigen Ordnerstruktur und der Installation & Konfiguration der Sass-Software.
Ordner-Struktur
Während wie bisher die Stylesheet-Datei in einem Unterodner /css abgelegt wurde, benötigen wir beim Arbeiten mit scss zusätzlich einen sog. Input-Ordner /sass, in dem die Ausgangsdatei als scss-Datei liegt, die nach dem Kompilieren mit einem SASS-Präprozessor als css-Datei im sog. Output-Ordner /css abgelegt wird.
Erstellen wir also in unserem Beispiel eine Ordner-Struktur mit einem sass-Ordner (INPUT) und einer scss-Datei, und einen css-Ordner (OUTPUT). Der Ordner /sass enthält unsere Arbeitsdatei style.scss, der Ordner /css bleibt vorerst leer. Nach dem Kompilieren der scss-Datei wird die Datei style.css erzeugt und im Output-Ordner /css abgelegt. Um die scss-Datei zur css-Datei zu kompilieren, benötigen wir nun einen SASS-Präprozessor oder "Kompiler".
Installation und Konfiguration der SASS-Software
Wir verwenden in unserem Beispiel den SASS-Präprozessor KOALA, der für MAC & Windows gratis zur Verfügung steht und als "GUI-Application" eine sehr einfache und übersichtliche grafische Benutzerführung bietet.
Download KOALA http://koala-app.com/
Nach der Installation von KOALA öffnen wir die Software und verbinden uns mit unserem Projekt-Ordner.
Die Software erkennt den "Input-Folder" /sass mit der darin enthaltenen scss-Datei style.scss.
Nachdem der SASS-Präprozessor die scss-Datei im Input-Folder erfolgreich erkannt hat, öffnen wir das Anwendungs-Panel - ( Klick auf die scss-Datei ) - und führen mit "Compile" die Erzeugung der css-Datei im Output-Folder durch.
Nach erfolgreicher Kompilierung zeigt die Software nun auch die im Output-Folder erzeugte css-Datei style.css an.
Die Kontrolle in unserer Beispiel-Ordner-Struktur zeigt nun die im Output-Folder /css erzeugte css-Datei style.css an - ebenso wird eine Hilfsdatei style.css.map angelegt, die zur schnelleren Verarbeitung beim Kompiling-Prozess dient.
Welche Vorteile bringt das Arbeiten mit scss / sass?
Fehler-Analyse
Wenn Fehler auftreten, gibt die SASS-Software ERROR-Beschreibungen aus, etwa wenn es keinen Output-Folder gibt, oder wenn Importe nicht richtig eingebunden sind oder Variablen nicht existieren - die Error-Beschreibungen sind sehr detailiert und speziell auch auf cross-browser-Stabilität ausgerichtet, was ein leichtes Auffinden und Korrigieren von Fehlern ermöglicht.
Anwendung von scss-Funktionen und vereinheitlichte Syntax von CSS-Klassen
Die Erstellung von Stylesheets per scss ermöglicht eine teilweise vereinfachte Syntax beim Erstellen von Klassen, bzw gibt es zahlreiche Funktionen durch die Änderungen im Stylesheet vereinfacht und beschleunigt werden können - speziell bei größeren Projekten mit mehreren Team-Mitgliedern können ansonsten aufwendigere Anpassungen rascher durchgeführt werden.
Definition korrekter css-Klassen
Um scss / sass effizient einzusetzen sind Webdesigner dazu angehalten CSS-Klassen-Definitionen zu optimieren und "schlampige" Klassen-Bezeichnungen zu vermeiden, was "zwangsweise" eine einfacher lesbare und eindeutigere css-Struktur erzeugt. Verkürzt kann gesagt werden, dass bislang durchaus sinnvolle Vererbungen von css-Eigenschaften durch eindeutige css-Klassen ersetzt werden sollten und Vererbungen strikt zu vermeiden sind.
Variablen mit SCSS
Eine für Webdesigner besonders nützliche Funktion von scss ist der Einsatz von Variablen - speziell die Definition diverser Schriften, Schrift-Farben oder Background-Farben mittels Variablen ist zur raschen Ausarbeitung stimmiger Designs sehr vorteilhaft. Auch für den bei grösseren Projekten benötigten Style-Guide ist die Sammlung von Variablen in einer eigenen Datei besonders nützlich.
Anlegen und Zuordnung von Variablen
Um die Vorteile von SASS effizient zu nutzen, legen wir die Variablen für unser Projekt in einer eigenen scss-Datei an um diese Variablen dann in unsere scss-Datei zu importieren und entsprechend zuzuordnen.
Wir erzeugen die Datei variablen.scss im Input-Folder /sass und definieren darin die Variablen für Schriften, Text und Farben.
Die Variablen werden per @import in die Datei style.scss importiert.
Die Werte der betreffenden css-Eigenschaften werden mit den entsprechenden Variablen befüllt.
Nach Kompilierung durch sass wird die Datei style.css nun im Output-Folder /css abgelegt, und die Variablen werden durch die ihnen zugewiesenen Werte in die Datei style.css geschrieben - das bringt den Vorteil, dass Variablen-Werte schnell ausgetauscht und css-Eigenschaften sehr rasch geändert werden können.
Effizientes Arbeiten mit SCSS / Bezeichnung von CSS-Klassen
Um die Vorteile beim Arbeiten mit scss wirklich effizient nutzen zu können, ist eine strukturierte Bezeichnung von CSS-Klassen erforderlich - speziell bei größeren Projekten ist es beim Arbeiten im Team nahezu unverzichtbar sich auf eine einheitliche Erstellung von CSS-Klassennamen zu einigen, bzw ist eine korrekte CSS-Auszeichnung die Vorraussetzung für den weiteren effizienten Einsatz von scss & sass. Auch Programmierer sind dankbar wenn sie sich beim "Lesen" von CSS-Klassen leicht zurecht finden - Zuordnungen von CSS-Klassennamen sollten im besten Fall genauso "logisch" sein wie der Programmier-Code selbst.
Regel Nummer 1 - Vererbungen vermeiden
Normalisierte CSS-Stylings auf HTML-Elementen
HTML-Elemente sollten in den sog. CSS-Resets eindeutig definiert und "normalisiert" werden und somit bei ihrer Verwendung keine "Überraschungen" erzeugen, die nur durch wiederholtes Überschreiben vererbter Eigenschaften beherrschbar sind.
Eine möglichst saubere Normalisierung der HTML-Elemente ist die Basis für den unverzichtbaren CSS-Style-Guide - das gilt für sämtliche Formular-Elemente, Tabellen, und Text-Elemente wie Überschriften, Absätze und Listen.
Verzicht von IDs bei der Erstellung der CSS-Struktur
Ähnlich verhält es sich beim Einsatz von IDs - diese sollten nur vom Programmierer "pro Element und eindeutig nur einmal vorkommend" eingesetzt werden, und niemals als Design-Element mit CSS-Eigenschaften versehen oder mit CSS-Klassen kombiniert werden.
Vereinheitlichte Struktur von CSS-Klassen-Namen
Unser Ansatz ist es nicht zu übertreiben - Auch wenn es sicherlich sinnvoll ist CSS-Klassen-Namen in Gruppen zu strukturieren, also etwa eine Aufteilung in Layout-Klassen, Grid-Klassen, Modul-Klassen, Helper-Klassen usw. vorzunehmen, so ist das meist nur möglich wenn ein Projekt mitsamt den CSS-Dateien ganz von Anfang an neu aufgebaut wird - meist werden Projekte jedoch zumindest teilweise aus bereits bestehenden Layout- oder Template-Vorlagen erstellt, weswegen allzu strenge Regeln zur Gruppierung von CSS-Klassen aus unserer Sicht nicht unbedingt nötig sind.
Korrekter Aufbau von Klassen-Namen / Prefixing
Umso wichtigier anstatt der Gruppierung von CSS-Klassen nach "Art" ist allerdings eine strikte Namensgebungs-Richtline für den Aufbau von CSS-Klassen, unter Einhaltung folgender Regeln:
Ein Klassen-Name beginnt immer mit einem funktionsbeschreibenden PREFIX, darauf folgt nach Bindestrich der NAME, bei verschachtelten Bereichen mit darin enthaltenen Detail-Abschnitten nach Bindestrich die Bezeichnung der verschiedenen ELEMENTE, die nur innerhalb des NAME-Levels angewendet werden sollen.
[ prefix ]-[ name ]-[ element ]
Es werden möglichst kurze und eindeutig beschreibende Namen in Kleinbuchstaben vergeben, die erkennen lassen um was für einen Layout-Bereich es sich handelt.
CSS-Klassen-Namen strikt nach Regel - lieber eine Klasse zuviel als zuwenig.
Die CSS-Klassen-Namen sind dem Modul m-fbwidget eindeutig zugeordnet.
Der Active-Zustand am Link m-fbwidget-link ist mit m-fbwidget-link--active formatiert.
Nesting
Wenn CSS-Klassen-Namen nach strikten Regeln vergeben werden, ergeben sich in scss Möglichkeiten für die verkürzte eingebettete Schreibweise beim "Nesting" - und eine saubere Hierarchie bei verschachtelten Elementen für eine klare Übersicht und eine einheitliche Struktur beim Aufbau der CSS-Klassen.
Die verkürzte Schreibweise des Active-Zustands mit &--active in der scss-Datei ergibt nach Sass-Kompilierung die Ausgabe der beiden css-Klassen ...
... und nach Erweiterung auch weitere Active-Zustände von m-fbwidget-link.
Das Modul m-fbwidget in verkürzter und verschachtelter scss-Syntax.
Vorteil: ein Duplikat des Moduls würde in scss nur eine Änderung an einer Stelle bedeuten - ideal bei aufwendigeren Projekten mit modularem Aufbau.
Mixins
Wenn sich CSS-Code-Elemente öfters wiederholen, lohnt es sich oft den Schreibaufwand zu minimieren.
"Mixin" der 4-zeiligen cross-browser-Anweisung und CSS-Ausgabe mit @include.
Import Partieller Stylesheets
Bei konsequenter Anwendung von SCSS entsteht der Bedarf sämtliche Variablen, Resets, Mixins zusammenzufassen und als jeweils eigene scss-Datei mitzuführen und anschließend in die zentrale Stylesheet-Datei style.scss zu importieren.
Partielle SCSS-Dateien werden mit _underscore benannt, dadurch erkennt Sass, dass es sich um partielle Zusatz-Dateien handelt, die selbst nicht als css-Datei kompiliert werden sollen.
Beim Import externer scss-Dateien muss die File-extension nicht angegeben werden.
Erweitern & Vererben mit SCSS
Die wertvollste Funktion mit scss ist sicher die Funktion Ertend / Inheritance - damit ist es möglich sehr komfortabel css-Eigenschaften weiterzuvererben, bzw auf ein neu definiertes Element zu übertragen.
Die Klasse .gallery-team begründet den Container für eine Gallery, die beiden verschachtelten Pseudoklassen a:after und a:before sind für den clearfix des Elements verantwortlich - wertvoll wird diese scss-Schreibweise wenn weitere Gallerie-Blöcke - wie etwa .gallery-user - dazukommen.
Die beiden mixins für box-shadow_60 und opacity_100 sind für die im Projekt geplanten Schatten-& Transparenz-Effekte vorgesehen und können flexibel mit @include überall angewendet werden.
Die per @include "entpackten" mixin-Eigenschaften der Klasse .gallery-team-img werden per @extend auf alle anderen "Klassen-Varianten" vererbt - zusätzlich sollen sie jeweils ein anderes Maß für die spaltenweise Darstellung beinhalten und rasch um weitere Bild-Größen erweiterbar sein.
Die Klasse für den Gallery-Container .gallery-team inklusive "clear-fix" in der css-Ausgabe - kommen weitere Container dazu, ist die verkürzte scss-Syntax vorteilhaft um rasch weitere Container-Klassen anzulegen.
Die Klassen für die Gallery-Bilder sind zusammengefasst und enthalten gemeinsam die Eigenschaften für Schatten und Transparenz und zusätzlich die jeweils eigenen Größen-Angaben.
Viel Erfolg beim Arbeiten mit scss!
Bei Interesse an einem unserer Ausbildungs-Workshops senden Sie uns bitte ihre Kurs-Anfrage per Email.
Hier finden Sie alle Kurse zur Ausbildung zum Webdesigner.
Für Fragen zu Kurs-Inhalten, Kursdauer und Terminen, bzw für Fragen zu Anmeldung, Finanzierung und Förderungen durch AMS oder Waff stehen wir gerne zur Verfügung.