Modernes CSS mit SASS
Modernes CSS mit Sass – Praxis-Tutorial

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
Kategorien
Webdesign, CMS & Entwicklung
Mit Liebe erstellt von:
Daniel Koch Daniel Koch

Modernes CSS mit Sass

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!