Feedback & Wünsche

TutKit.com

Modernes CSS mit Sass

Modernes CSS mit Sass

4eck Media GmbH & Co. KG

Kategorie: Webdesign | Trainer: Daniel Koch

  • 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

Trainings-Informationen

Bewertungen

1 Kundenrezensionen Trailer ansehen
Gesamtinhalt herunterladen
Jetzt dabei sein Jetzt gratis testen

Tutorial ansehen Arbeitsdateien herunterladen

Modernes CSS mit Sass

Modernes CSS mit Sass - 01 Eine Einführung

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.

  8 Min. Kostenlos
Modernes CSS mit Sass - 02 Die Installation

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

  10 Min.
Modernes CSS mit Sass - 03 Gekonnte Kompilierung

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

  10 Min.
Modernes CSS mit Sass - 04 Dateien zusammenfassen

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.

  14 Min.
Modernes CSS mit Sass - 05 Variablen deklarieren und verwenden

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

  8 Min.
Modernes CSS mit Sass - 06 Das Nesting-Prinzip

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.

  11 Min.
Modernes CSS mit Sass - 07 Gekonnte Vererbung mit Extend

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.

  9 Min.
Modernes CSS mit Sass - 08 Module mit den Platzhalter-Selektoren

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.

  12 Min.
Modernes CSS mit Sass - 09 Mixins definieren

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.

  11 Min.
Modernes CSS mit Sass - 10 Der Elternelement-Selektor

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.

  9 Min.
Modernes CSS mit Sass - 11 Automatisierung mit For-Schleifen

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.

  14 Min.
Modernes CSS mit Sass - 12 Each- und While-Schleifen

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.

  11 Min.
Modernes CSS mit Sass - 13 Fallentscheidungen mit if und else

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

  12 Min.
Modernes CSS mit Sass - 14 Mathematische Operatoren

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.

  10 Min.
Modernes CSS mit Sass - 15 Farbenspiele

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

  13 Min.
Modernes CSS mit Sass - 16 Compass

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.

  10 Min.
Modernes CSS mit Sass - 17 Compass und CSS3

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.

  9 Min.
Modernes CSS mit Sass - 18 Compass in Bullet-Aktion und ein Blick auf Susy

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.

  12 Min.

Diese Inhalte könnten dich ebenfalls interessieren

Lade...     Wir sind auf der Suche nach interessanten Trainings für dich, bitte gib uns einen Moment.

© 2002-2021 4eck-Media GmbH & Co. KG • Mit erstellt von 4eck-media.de

Top

Cookie-Einstellungen

Auf unserer Webseite verwenden wir Cookies. Einige davon sind notwendig. Weitere Informationen zu den verwendeten Cookies erhältst du hier.

Alle akzeptieren Auswahl speichern