Modernes CSS mit Sass – Praxis-Tutorial

Dank CSS-Präprozessoren lässt sich CSS deutlich effektiver schreiben. Was diese Präprozessoren sind, welche es gibt und warum die Wahl in dieser Reihe auf Sass fiel, zeigt dieses Video.

Bevor sich Sass nutzen lässt, muss man es installieren. Und Voraussetzung dafür ist Ruby. Beides – also die Installation von Ruby und Sass – wird in diesem Video gezeigt. Anschließend könnt ihr dann gleich testen, ob die Sass-Installation tatsächlich geklappt hat.

Sass- müssen in CSS-Dateien umgewandelt werden, damit sie tatsächlich nutzbar sind. Dank des Watch-Kommandos könnt ihr Änderungen an einzelnen Dateien oder innerhalb ganzer Verzeichnisse ganz einfach erkennen (lassen).

Über @import lassen sich SCSS-Dateien importieren und zusammenfügen. Was das alles mit einem vorangestellten Unterstrich beim Dateinamen zu tun hat, ist ein Aspekt dieses Videos.

In Sass gibt es die Möglichkeit zur Deklaration von Variablen. Dieses Konzept steht im herkömmlichen CSS bekanntermaßen nicht zur Verfügung, ist aber in Sass ein geniales Mittel zur effektiven Entwicklung von Stylesheets.

Dank Nesting lässt sich die Sass-Syntax deutlich schlanker halten, als das in CSS üblich ist. Die Verschachtelung hilft euch zudem dabei, Code deutlich übersichtlicher zu schreiben.

Der Einsatz von @extend ermöglicht es euch, einen Satz von CSS-Eigenschaften von einem zu einem anderen Selektor zu übergeben. Auch das hilft dabei, Sass-Dateien schlank zu halten.

Der Platzhalter-Selektor ermöglicht die Definition von Modulen. Diese Modularisierung erlaubt die Aufteilung von Sass-Syntax in logische Blöcke, die an verschiedenen Stellen eingebunden werden können.

Mixins sind Funktionen, mit denen sich beispielsweise Arbeitsabläufe deutlich vereinfachen lassen. In diesem Video wird gezeigt, wie ihr eigene Mixins definieren und schlussendlich anwenden könnt.

Mit dem Selektor, um den es in diesem Video geht, könnt ihr auf das Elternelement eines Elements zugreifen. Diesen Selektor gibt es in CSS bekanntermaßen nicht und bietet daher einen riesigen Mehrwert.

Sass ermöglicht den Einsatz von For-Schleifen. Das funktioniert in Sass ganz einfach und kann beispielsweise für die Definition eines eigenen Grid-Systems herangezogen werden.

Neben For- können in Sass auch Each- und While-Schleifen genutzt werden. Wie sich das zur Automatisierung nutzen lässt, zeigt dieses Video.

In Sprachen wie PHP und JavaScript gibt es die Möglichkeit, auf unterschiedliche Ereignisse mittels if und else reagieren zu können. So etwas gibt es tatsächlich auch in Sass. Wie sich das nutzen lässt, zeigt dieses Video.

Ihr könnt in Sass rechnen. Das ist beispielsweise hinsichtlich der Definition von Schriftgrößen praktisch. Dank der entsprechenden Operatoren kann man aber auch sein ganz individuelles Grid-System bauen.

Selbstverständlich können in Sass Farben definiert werden. Sass geht aber auch auf diesem Gebiet deutlich weiter als herkömmliches CSS. Dank der entsprechenden Funktionen lassen sich beispielsweise ganz einfach Farben manipulieren.

Das Compass-Framework erweitert die Möglichkeiten von Sass noch einmal um ein Vielfaches. Dieses erste Video zeigt, wie ihr Compass installieren und nutzen könnt.

Die Projekt-Webseite von Compass ist das zentrale Informationsmittel, wenn es um die Arbeit mit diesem Framework geht. Ich zeige euch anhand der CSS3-Features von Compass, wie ihr mit der Doku arbeiten könnt.

Ein Beispiel zeigt, wie einfach sich Dinge mit Compass umsetzen lassen. Am Ende dieser Reihe wird zudem ein Blick auf ein alternatives Sass-Framework geworfen. Susy bietet ein schlankes Grid-System.