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!



Modernes CSS mit Sass – Praxis-Tutorial
Sobald du dem Cookie zum Anzeigen von Videos zustimmst, akzeptierst du die Datenschutzerklärung von YouTube und kannst unsere Videos ansehen.
Dieser Inhalt ist verwendbar mit: Kategorie Icon

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. Lerne deinen Trainer hier im einführenden Tutorial des Kurses kennen:

Sobald du dem Cookie zum Anzeigen von Videos zustimmst, akzeptierst du die Datenschutzerklärung von YouTube und kannst unsere Videos ansehen.

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!

Kompatibilität (alle Produkte für Windows und macOS)

Voraussetzung zum Nachvollziehen der Inhalte ist, dass du über Ruby und Sass verfügst. Gleich in Lektion 2 zeigt dir dein Trainer, wie du diese Komponenten installierst. Alle Ausführungen in Deutsch.

Fazit

Video-Tutorial: Generiere modernen CSS-Code mit Sass, um deine Programmierung noch effizienter zu gestalten! Ausführungen in Deutsch.

Schnapp dir jetzt den Artikel:


1 Bewertung – 5 von 5 Sternen

Domenico M. 06.01.2017

Gutes Tutorial, gut verständlich erklärt. Ich persönlich habe einiges neues dazu gelernt.
5 von 5 Sternen.

Bewertet mit 5 von 5 Sternen, basierend auf 1 geprüfte Bewertung(en).

06.01.2017

Gutes Tutorial, gut verständlich erklärt. Ich persönlich habe einiges neues dazu gelernt.
5 von 5 Sternen.