Kostenloser Sass-Video-Kurs bei Codeschool.com

Am 23.01.2013 in Technik von Benni - Keine Kommentare

Am Samstag hat Dieter Petereit im Dr.Web-Magazin auf einen kleinen kostenlosen Sass-Video-Kurs hingewiesen.
Sass (Syntactically Awesome Stylesheets) ist eine Meta-Sprache für CSS. Effektiv eingesetzt kann die Erstellung von CSS-Dateien durch die Nutzung des Sass-Preprozessors stark vereinfacht werden.

Um den Kurs wirklich nutzen zu können, sollte man sicherlich über ein gewisses Maß an Kenntnis bzgl. der Nutzung von CSS verfügen. Da sich der Kurs aber an Einsteiger in Sass richtet muss man sicherlich auch kein absoluter Experte sein.

Der englischsprachige Video-Kurs besteht aus sieben Teilen.

Codeschool: Inhalte des Videokurses Assembling Sass

Ich, als Sass-Laie, habe mir den Kurs mal zu Herzen genommen und will in der Folge darüber berichten.

Kurs-Inhaltsverzeichnis

  1. Foundation, Einführung und Grundlagen
  2. Variable, Erstellung und Nutzung von Variablen
  3. Mixin, Nutzung wiederverwertbarer Styles
  4. Extend, Wiederverwendung von CSS-Klassen und Vererbung
  5. Directive, Einführung in Sass-Tools, wie Funktionen und Schleifen
  6. Math + Color, Zahlenwerte und Farben relativ zu gesetzten Werten definieren
  7. Responsive, Erleichterung und Optimierung der Erstellung responsiver Webdesigns

Nach jedem Videokurs muss man eine Reihe von Aufgaben, die sich ganz einfach über ein in die Lernoberfläche integriertes Online-Tool erledigen lassen, bearbeiten. Das Ganze ist sehr intuitiv gelöst und auch nicht allzu schwierig, wenn man dem Kurs aufmerksam gefolgt ist.
Dabei muss man Sass-Code so umbauen, dass die Aufgabenstellung erfüllt wird. Hat man die Prüfung erfolgreich absolviert, kann man sich das nächste Video anschauen.

Codeschool: Online-Tool zum Bearbeiten der Aufgaben

Level 1: Sass-Grundlagen

Im ersten Teil geht es um die absoluten Grundlagen. Nachdem erklärt wurde, wie der generelle Ablauf der CSS-Datei-Erstellung aussieht (eine .scss-Datei wird durch einen Preprozessor zu einer .css-Datei) werden die absoluten Grundlagen erläutert: Wie kommentiere ich und wie verschachtele ich meine Sass-Definitionen.
Die Möglichkeiten der Verschachtelung finde ich ehrlich gesagt äußerst interessant.

Interessant ist auch die Art und Weise wie mit @imports umgegangen wird. Hier ergeben sich Möglichkeiten die Probleme, die durch das “parallele” Laden vieler CSS-Dateien, mit einem Schlag zu lösen, indem man einfach nur eine einziges CSS-Datei hat. Sass integriert alle “Importe” in diese eine Datei.

Level 2: Die Nutzung von Variablen in .scss-Dateien

Nur etwa 5 Minuten dauert dieses Video, allerdings lernt man auch in dieser kurzen Zeit, welche Macht in den Variablen liegen kann.

Beispiel für die Nutzung von Variablen in Sass

Das Thema Sichtbarkeitsbereich (scope) ist im Prinzip so, wie man es auch von Programmiersprachen kennt (wenn man es denn kennt).

Level 3: Nutzung von Mixins

Zunächst einmal wird erklärt, was es mit Mixins auf sich hat. Eine gute Übersetzung liefert Sarah Mischinger:

Ein Mixin definiert eine Reihe von Styles die dann im gesamten Dokument, durch aufrufen des Mixins, wiederverwendet werden können – also ein wiederverwendbarer Code-Schnipsel

Nach ein paar Beispielen wird die berechtigte Frage aufgeworfen wofür Mixins eigentlich gut sind. In diesem Zuge wird die Möglichkeit beliebig viele Argumente an ein Mixin zu übergeben erläutert. Das ist sogar als Key-Value-Paar möglich, klasse.
Das mag für Programmier-Neulinge zunächst einmal etwas viel auf einmal sein, letztlich ist das Prinzip aber relativ einfach zu verstehen, wenn man etwas mit dem entsprechenden Code herumspielt.

Sass besitzt auch variable Parameter für Mixins. Dieses Konstrukt sagt mir persönlich jetzt nicht wirklich zu. Da ich aber noch keine praktischen Erfahrungen habe, belasse ich es erstmal bei einem flauen Bauchgefühl.

Nach zwei relativ einfachen Videos zu Beginn, ist das Mixin-Video durchaus schon etwas fortgeschrittener. Nichtsdestotrotz sind die folgenden Aufgaben sicher lösbar. Zur Not kann man sich ja die Slides nochmals anschauen.

Level 4: Erweiterungen

Im vierten Video des Sass-Kurses dreht sich alles um das Schlüsselwort @extend. Das Video ist ebenfalls recht kurz – gerade mal vier Minuten – aber man erfährt, wozu man Erweiterungen nutzen kann und wo Probleme auftreten können bzw. wie man diese Probleme umgehen oder lösen kann.
Beispiele findet man übrigens auch in der Sass-Doku.

Zum Abschluss noch ein Beispiel, welches einen placeholder selector nutzt.

Sass-Definition inklusive eines Platzhalters

CSS-Ergebnis

In diesem Video kommt dann auch erstmals der Hinweis darauf, dass man das generierte CSS immer prüfen sollte, bevor man es in einer Produktivumgebung nutzt.
Ich habe in den Aufgaben zu diesem Video eine Aufgabenstellung nicht verstanden und musste mir eine Lösugn anzeigen lassen. In meinen Augen war aber meine Lösung ebenfalls richtig, wenngleich nicht die geforderte. ;)

Level 5: Funktionen und Kontrollstrukturen

Die fünfte Lektion befasst sich mit “Direktiven”. Ich übersetze es mal mit Kontrollstrukturen, da Bedingungen und Schleifen eben genau das sind, und Funktionen.
Diese Kapitel ist ganz klar schon etwas fortgeschrittener, da es schon etwas mehr an das Programmieren erinnert, als an das Stylen mit Hilfe von CSS. Nichtsdestotrotz ist klar, wenn man so weit gekommen ist, muss man da jetzt durch. Das Prinzip der Funktionen ist ähnlich wie bei Mixins, nur dass Funktionen grob gesagt einen Rückgabewert (@return) besitzen.

Etwas komplett Neues ist dabei das @if/@else-Konstrukt. Das Verständnis ist einfach, “if” bedeutet “falls” bzw. “wenn” und “else” bedeutet in diesem Falle “dann”.
Das folgende Beispiel bedeutet also:

Falls die Hintergrundfarbe gleich #eee ist, setze die Schriftfarbe auf #000.
Ansonsten setze die Schriftfarbe auf #ff0000;

Man kann das noch erweitern, indem man ein @else if einbindet. Ob das nicht letzten Endes alles etwas zu viel ist, muss man wohl in der Praxis herausfinden. Mir scheint an dieser Stelle aus dem Bauch heraus weniger etwas mehr zu sein.

Im weiteren Verlauf der Lektion werden noch die @each- sowie die for- und while-Schleife vorgestellt. Ich erspare mir mal die Zusammenfassung, auch deswegen weil ich persönlich finde, dass solche Strukturen irgendwie besser an anderen Stellen aufgehoben sind. Aber wie gesagt, nur ein erster theoretischer Eindruck.

Am Ende werden die Unterschiede von Mixins, Erweiterungen (@extend) und Funktionen nebeneinander gestellt. Sehr hilfreich für den Überblick.
Danach wird als Beispiel ein Beispiel aus dem dritten Video mit den neu erlernten Mitteln erweitert.

Level 6: Math + Color

Dieses Video bringt dem Kursteilnehmer die Möglichkeiten arithmetische Funktionen (Addition, Substraktion, Multiplikation, Division und den Modulo-Operator) in Sass zu nutzen näher. Im Prinzip alles recht gut verständlich und ohne allzu große Überraschungen. So ist es zwar möglich 14px + 10px zu rechnen, aber nicht 14px + 1.2em.

Das zweite Thema sind spezielle Funktionen und shortcuts für die Arbeit mit Farben. Eine schickes Feature ist zum Beispiel, dass man sich mit Hilfe dieses Codes den RGBA-Wert einer bestimmten Farbe ermitteln lassen kann und ihn nicht mehr manuell in Erfahrung bringen muss.

Quelle: Ein Beispiel aus dem Videokurs.

Interessant sind auf jeden Fall Funktionen wie lighten(), darken(), saturate() oder greyscale(). Es werden noch einige weitere Funktionen vorgestellt. Alles in allem klingt das doch schon sehr interessant.

Level 7:

Im letzten Kapitel des Sass-Videokurses geht es um das Thema “responsive webdesign” bzw. wie man Sass nutzt, um effektiv responsiv zu entwickeln.
Aufgrund der Tatsache, dass responsive design mittlerweile eigentlich keine Seltenheit mehr ist, sondern auf dem Weg ist einen gewissen Standardanspruch zu erwecken, darf natürlich ein Kapitel über eben diese Entwicklungsmöglichkeiten mit Sass nicht fehlen.
Es wird zwar auf den Kurs Journey Into Mobile verwiesen, allerdings braucht man ihn für das Verständnis des Kapitels nicht.

Die Basis responsiven Designs sind Media Queries. Mit @media bietet Sass natürlich auch hier eine Möglichkeit an CSS-Code zu optimieren. Im Kurs lautet das Stichwort “nested media queries”. Ein interessanter und weiterführender Artikel findet sich auf designshack.net: Sass and Media Queries: What You Can and Can’t Do.

Es wird beschrieben, wie man Media Queries immer noch ein Stückchen dynamischer gestalten kann, was ich sehr interessant fand.

Geschafft! Und jetzt?

Glückwünsche nach dem erfolgreichen Absolvieren des Assembling Sass Kurses bei CodeSchool.com

Als Bonus gibt es nach dem erfolgreichen Abschluss des Kurses noch ein Video, in dem Nick Walsh, der einen ja bislang gut durch den Kurs geleitet hat, weiterführende Informationen bietet und ein paar Ressourcen im Netz nennt, die sich gut zum Lernen von Sass eignen. Diese Ressourcen sind aber auch nochmal auf der “Congratulations”-Seite verlinkt. Ein paar davon habe ich auch unten in den weiterführenden Links gelistet.

Interessant ist nun natürlich noch, wie nutze ich denn Sass eigentlich in der Praxis? Gute Frage. Die Antwort inklusive ein bisschen Beispielpraxis wird es dann in Kürze in einem separaten Artikel geben.

Wie kann ich diesen Kurs nutzen?

Einfach diesen Link aufrufen und auf “Claim Your Free Course” klicken und dann den Instruktionen folgen.

Codeschool: Kostenloser Online-Kurs: Assembling Sass

Man muss übrigens kein Englisch-Guru sein. Mit etwas Willen versteht man so gut wie alles, was erklärt wird.
Der vorgestellte Sass-/CSS-Code ist dazu noch selbsterklärend.

Hinweis: Der Kurs ist nur noch bis zum 31.Januar kostenlos. Also schnell sein!

Fazit

Mir hat der Kurs gut gefallen, da er relativ schnell grundlegendes Wissen über Sass vermittelt. Durch die Integration von “Challenges” nach den Lektionen wird zumindest ansatzweise auch praktisch gearbeitet, was natürlich einen großen Vorteil gegenüber rein theoretischen Angeboten bietet.

Selbstverständlich braucht es trotzdem ein paar Praxistests, um wirklich warm mit Sass zu werden. Das ist aber Thema für einen anderen Artikel.

Für den Einstieg kann ich den Videokurs definitiv empfehlen. Man muss natürlich etwas Zeit mitbringen, aber gleichzeitig ist man auch nicht gezwungen alle Videos an einem Stück anzuschauen bzw. zu bearbeiten.

Habt ihr bereits Erfahrungen mit Sass gemacht? Oder kennt ihr andere gute Tutorials oder Kurse zu diesem Thema? Teilt euer Wissen mit anderen und mit uns.

Weiterführende Links

Autor: Benni

Ich bin festangestellter Webentwickler bei einer großen deutschen Website und interessiere mich daneben für alles, was irgendwie mit der Veröffentlichung von Inhalten im Internet zu tun hat. - Twitter - Blog

Hinterlasse eine Antwort