Komplettkurs: Durchstarten mit Sass / SCSS
4.5 (68 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
480 students enrolled

Komplettkurs: Durchstarten mit Sass / SCSS

Lerne Sass / SCSS von der Kommandozeilen-Installation bis hin zur vollständigen Funktionsreferenz.
Bestseller
4.5 (68 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
480 students enrolled
Created by Pascal Bajorat
Last updated 5/2018
German
Current price: $65.99 Original price: $94.99 Discount: 31% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 3.5 hours on-demand video
  • 2 articles
  • 12 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Die wichtigsten Funktionen der Sass Kommandozeile
  • Grafische-Oberflächen / GUI-Tools für die Kompilierung von Sass / SCSS
  • Die Unterschiede zwischen Sass / SCSS
  • Alle wichtigen Strukturen und Funktionen von Sass / SCSS wie z.B. Variablen, Nesting, Mixins, Funktionen uvm.
  • Beispiele für die Verwendung von komplexeren Mixins und Schleifen
  • Code-Debugging und Kontrolle mittels @debug, @warn und @error
Course content
Expand all 28 lectures 03:29:20
+ Einleitung
2 lectures 09:15

Einleitung zum Kurs und Informationen über deinen Trainer / Dozenten.

Preview 02:28

In dieser Lektion lernst du den Unterschied zwischen Sass und SCSS an einem anschaulichen Beispiel und Syntax Vergleich kennen.

Preview 06:47
+ Sass / SCSS Compiler installieren
3 lectures 07:49

In diesem Video erfährst du, wie das Sass Kommandozeilen-Tool unter Mac OS installiert wird. Die Liste mit den Befehlen zur Installation ist hier zu finden: http://sass-lang.com/install

Sass-Installation unter Mac OS
02:42

In diesem Video erfährst du, wie das Sass Kommandozeilen-Tool unter Windows installiert wird. Die Liste mit den Befehlen zur Installation ist hier zu finden: http://sass-lang.com/install

Sass-Installation unter Windows
03:09
+ Software & Sass / SCSS Tools
5 lectures 31:10

Einführung in PhpStorm und die FileWatcher. Link zum Download: https://www.jetbrains.com/phpstorm/

PhpStorm (Windows / Mac / Linux)
05:02

Einführung in CodeKit: https://codekitapp.com/

CodeKit (Mac only)
12:17

Einführung in Compass: Download / Webseite: http://compass.kkbox.com/

Compass (Windows / Mac / Linux)
07:34

Einführung in die ScoutApp: http://scout-app.io/

ScoutApp (Windows / Mac / Linux)
04:55
+ Durchstarten mit Sass / SCSS - Funktionsreferenzen
15 lectures 02:22:41
Einführung
04:26

In diesem Video erkläre ich dir, wie du Variablen in Sass / SCSS einsetzen kannst.

Preview 16:44

In diesem Video erfährst du, wie du Operatoren für mathematische Berechnungen nutzen kannst.

Operatoren
01:16

In dieser Lektion erfährst du alles über die SCSS / Sass typische Verschachtelung, dass sogenannte Nesting.

Nesting
19:18
@extend - Nesting - Teil 2
07:01
Kommentare
04:14
@Import
10:06
Mixins
17:21
@if - Conditional Logic
12:23
@debug, @warn und @error
10:32
Schleifen in SCSS (@for)
12:47
Schleifen in SCSS (@while)
06:11
Schleifen in SCSS (@each)
09:53

Eine Übersicht über wichtige Funktionen in SCSS / Sass und wie diese verwendet werden. Eine vollständige Liste findest du unter diesem Link: http://sass-lang.com/documentation/Sass/Script/Functions.html

Funktionen in SCSS - SASS
07:09
Abschluss und Lerninfos
03:20
+ Sass Kommandozeile & zusätzliche Infos / Tipps
2 lectures 18:16

Einführung in die Kommandozeile von Sass, unter folgendem Link findest du eine Liste aller Parameter: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#options

Crashkurs für die Sass Kommandozeile
18:08
Hilfreiche Links
00:08
Requirements
  • Du solltest Grundlagenwissen in HTML und CSS mitbringen, da Sass / SCSS auf CSS aufsetzt
  • Grundlegender Umgang mit Computern sollte kein Problem sein.
  • KEINE weiteren Vorkenntnisse mit Kommandozeilen-Tools oder Compilern erforderlich.
Description

+++ Sass / SCSS Kurs mit Referenzkarte & Erfolgsgarantie für alle Teilnehmer +++

Möchtest du lernen, wie du mittels Sass / SCSS deinem Code Superkräfte verleihen kannst? Sass / SCSS ist die ausgereifteste, stabilste meistverwendete und vor allem umfangreichste CSS-Erweiterungssprache / Stylesheet-Sprache der Welt.

Sass (Syntactically Awesome Stylesheets) ist eine Stylesheet-Sprache, die als CSS-Präprozessor, mit Variablen, Schleifen und vielen anderen Funktionen, die Cascading Style Sheets (CSS) nicht mitbringen, die Erstellung von CSS vereinfacht und die Pflege großer Stylesheets massiv erleichtert und beschleunigt.

Mit Sass / SCSS machst du deinem CSS-Code sprichwörtlich Feuer unter dem Hintern!

In diesem Kurs lernst du sämtliche Vorteile und Funktionen von Sass und SCSS an anschaulichen Beispielen und ganz praxisbezogen kennen. Für viele Einsteiger ist die Installation und Kommandozeile von Sass oft eine der größten Hürden. Deshalb erfährst du in dem Kurs Schritt für Schritt die Installation in einem extra Video für Windows und Mac OS.

Für Kommandozeilen-Muffel gibt es jedoch gleich mehrere Videos zu GUI-Tools / Compiler-Software, falls du lieber direkt mit einfacher Software statt der Kommandozeile arbeiten möchtest. So oder so - Dank der verständlichen und anschaulichen Schritt für Schritt Videos sind vormalige Hürden jetzt auf ein Minimum reduziert und du kannst selber entscheiden, wie du mit Sass / SCSS arbeiten möchtest.

Neben der Kommandozeile lernst du folgende populäre Sass-Compiler / Software kennen:
PhpStorm, CodeKit, Compass und ScoutApp.

Dieser Kurs "Durchstarten mit Sass / SCSS" versteht sich als vollständige Lernreferenz und Komplettkurs. Du wirst neben allen Basics von Sass / SCSS auch viele erweiterte und fortgeschrittene Funktionen kennenlernen. Am Ende des Kurses wird es keine Funktionen mehr in Sass / SCSS geben, die dir noch unbekannt sind.

Aber keine Angst! Der Kurs ist so aufgebaut, dass sich die Funktionen Stück für Stück steigern. Bereits die ersten Kapitel werden dich in die Lage versetzen Sass / SCSS produktiv für deine eigenen Projekte einzusetzen. Alle Funktionen von Sass / SCSS sind dabei in einzelne Lektionen unterteilt, so kannst du jederzeit zu einzelnen Funktionen oder Strukturen "nachschlagen" und dich bei Bedarf zielgerichtet informieren.

Im Kurs lernst du neben weiteren Bereichen folgende Kernfunktionen und Informationen kennen:

  • Unterschied zwischen Sass und SCSS
  • Einrichtung von Compiler-Software
  • Einführung in die Kommandozeile
  • Variablen
  • Operatoren
  • Nesting
  • @extend
  • Kommentare
  • @import
  • Mixins (@mixin / @include)
  • @if / @else if - Conditional Logic
  • @debug, @warn und @error
  • Schleifen in Sass / SCSS: @for, @while und @each
  • Funktionen in SCSS - SASS (z.B. lighten, darken, saturate, uvm.)

   

Deine Fragen werden beantwortet - versprochen!

Selbstverständlich bist du bei dem Kurs nicht auf dich alleine gestellt. Du kannst jederzeit Fragen über den Fragen & Antworten Bereich stellen. In der Regel erhältst du dort noch innerhalb eines Werktages (meist sogar innerhalb weniger Stunden) eine Rückmeldung auf deine Fragen.

Arbeitsmaterial
Alle relevanten Beispiele aus dem Kurs sind als Code-Vorlage beigelegt, so kannst du diese nicht nur einfach nachbauen, sondern auch jederzeit direkt mit dem Code aus den Vorlagen experimentieren.

Die Erfolgsgarantie & Geld-zurück-Versprechen
Ich bin von Sass und SCSS überzeugt und glaube fest daran, dass diese Stylesheet-Sprache deinen Workflow extrem optimieren wird und auch, dass du mit Hilfe dieses Kurses innerhalb von wenigen Stunden Sass effizient einsetzen kannst. Solltest du auf Probleme stoßen, stehe ich dir persönlich über den Fragen & Antworten Bereich zur Seite. Sollte dir der Kurs nicht gefallen oder falls du Probleme mit Sass / SCSS hast, kannst du den Kurs innerhalb von 30 Tagen nach Kauf ohne Wenn und Aber zurückgeben und erhältst den Kaufpreis erstattet.

Sass / SCSS Referenzkarte zum Ausdrucken
Mit dem Kurs erhältst du eine Sass / SCSS Referenzkarte mit den wichtigsten Strukturen und Funktionen. Diese kannst du ausdrucken (oder auch digital verwenden) und zum lernen an deinen Arbeitsplatz legen.

+++ Worauf wartest du noch? Dank Erfolgsgarantie & Geld-zurück-Versprechen hast du nichts zu verlieren aber alles zu gewinnen! Ich würde mich freuen, dich als Teilnehmer begrüßen zu dürfen. +++

Who this course is for:
  • Du möchtest die Vorzüge von Sass / SCSS kennenlernen? Hier lernst du alle Funktionen Schritt für Schritt kennen.
  • Du möchtest praxisorientiert und nicht nur theoretisch lernen? Ich arbeite ausschließlich mit gut nachvollziehbaren Beispielen aus der Praxis.
  • Du weißt nicht, wo du bei Sass / SCSS anfangen sollst? Kein Problem ich zeige dir jedes Detail mit praktischen Beispielen und Schritt für Schritt.
  • Du möchtest möglichst sofort mit Sass / SCSS bei Produktivprojekten durchstarten? Kein Problem! Der Kurs ist so aufgebaut, dass du direkt dein Wissen der ersten Videos in eigene Projekte einfließen lassen kannst.