Modernes CSS mit SASS

Modernes CSS mit Sass – Praxis-Tutorial

Du hast dich schon immer darüber geärgert, dass es in CSS keine Variablen und Schleifen gibt? Schluss damit! CSS-Präprozessoren wie Sass stellen genau solche Dinge zur Verfügung. So lässt sich CSS-Code endlich effizient generieren. Neben Sass wird in diesem Tutorial natürlich auch ein Blick auf das allseits beliebte Compass-Framework geworfen, welches den Einsatz von Sass nochmals auf eine andere Ebene hebt. Lerne in drei Stunden die Möglichkeiten kennen, die Sass und Compass zu bieten haben.

Werde mit diesem dreistündigen Video-Training und dem Webentwickler Daniel Koch zum Sass-Meister
Definiere Variablen, erstelle eigene Mixins, experimentiere mit Farben und Zahlen und setze zur Krönung Compass ein
Lerne CSS effizient zu erzeugen und dein neues Wissen für zukünftige Projekte anzuwenden

Schritt für Schritt zur professionellen CSS-Entwicklung. Wenn CSS, dann modern und mit Sass – Daniel Koch zeigt es dir!

Details

Verwendbar mit:
Inhalt: 3 h Video-Training (Kompatibilitätshinweise)
Lizenz: private und kommerzielle Nutzungsrechte

Kategorien

Webdesign, CMS & Entwicklung

Mit Liebe erstellt von:

Daniel Koch

Modernes CSS mit Sass

Kostenlos

Modernes CSS mit Sass – 01 Eine Einführung

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.

Modernes CSS mit Sass – 02 Die Installation

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.

Modernes CSS mit Sass – 03 Gekonnte Kompilierung

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

Modernes CSS mit Sass – 04 Dateien zusammenfassen

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

Modernes CSS mit Sass – 05 Variablen deklarieren und verwenden

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.

Modernes CSS mit Sass – 06 Das Nesting-Prinzip

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.

Modernes CSS mit Sass – 07 Gekonnte Vererbung mit Extend

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.

Modernes CSS mit Sass – 08 Module mit den Platzhalter-Selektoren

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.

Modernes CSS mit Sass – 09 Mixins definieren

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.

Modernes CSS mit Sass – 10 Der Elternelement-Selektor

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.

Modernes CSS mit Sass – 11 Automatisierung mit For-Schleifen

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.

Modernes CSS mit Sass – 12 Each- und While-Schleifen

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

Modernes CSS mit Sass – 13 Fallentscheidungen mit if und else

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.

Modernes CSS mit Sass – 14 Mathematische Operatoren

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.

Modernes CSS mit Sass – 15 Farbenspiele

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.

Modernes CSS mit Sass – 16 Compass

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.

Modernes CSS mit Sass – 17 Compass und CSS3

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.

Modernes CSS mit Sass – 18 Compass in Bullet-Aktion und ein Blick auf Susy

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.

Details zum Inhalt

CSS in effizient – mit Sass: starte mit dem Praxis-Tutorial durch

Sass hat die CSS-Entwicklung revolutioniert, denn endlich lässt sich CSS-Code effektiv schreiben. In satten drei Stunden mit 18 Lektionen erfährst du alles Wichtige zum Thema Sass und dem Sass-Framework Compass.

Installation der Sass-Entwicklungsumgebung

Bevor du dich in dem CSS-Tutorial auf Sass-Reise begibst, geht es an die Installation. Aber keine Bange – diese ist ganz einfach. Ruby und ein paar Befehle auf der Kommandozeile genügen und schon bist du stolzer Besitzer einer Sass-Entwicklungsumgebung. Wer bislang vor der Sass-Installation zurückgeschreckt ist, wird hier Schritt für Schritt durch die Installation geführt. Ein erster Test wird dann zeigen, welche Sass-Version installiert ist.

Erste Schritte mit einer typischen Projektstruktur

Danach folgen auch schon die ersten Schritte: Los geht es mit Sass! Einem ersten Blick auf die Syntax folgen grundlegende Sprachbesonderheiten. Du lernst Variablen kennen, siehst eine typische Projektstruktur und findest dich schnell in Sass zurecht.

Entwicklung: Schleifen & If-Statements

So vorbereitet, schließt sich die Profi-Entwicklung an: Was Sass so besonders macht, sind die Sachen, die fast schon an echte Skriptsprachen wie JavaScript erinnern. Denn auch in Sass lassen sich Schleifen definieren und If-Statements nutzen. Diese Dinge sind dann auch die Grundvoraussetzung für die Königsdisziplin in Sass – die Definition von Mixins. Das sind mächtige Funktionen, die dir die Arbeit mit Sass, letztendlich also mit CSS erheblich erleichtern.

Compass: Vereinfacht die Arbeit mit CSS

Den krönenden Abschluss dieses Trainings bildet Compass. Das hebt die Sass-Entwicklung noch einmal auf eine völlig andere Ebene, denn dieses Sass-Framework bietet zahllose Tools und Funktionen, die dir die Arbeit mit CSS noch einmal deutlich vereinfachen.

Das lernst du im CSS- und Sass-Tutorial

Du lernst Schritt für Schritt die Funktionen von Sass kennen, vom Einstieg über die Profi-Werkzeuge bis hin zum Arbeiten mit Compass. Damit bekommst du an die Hand, was aktuell möglich ist, und kannst dein Wissen direkt umsetzen. CSS-Schreiben war noch nie so effizient!