SASS – Ein Schnellseinstieg

Wer es einmal benutzt wird es lieben.

So zumindest mein persönlicher Eindruck zum Thema CSS Präprozessoren. Aber was genau ist das nun und wie kann ich dieses „Wunderwerkzeug“ nutzen?

Was es nicht ist?

Eine Alternative zu den bekannten CSS Dateien. Eher eine Arbeitsweise für das erstellen bzw. generieren von CSS Dateien.

Was st es denn nun?

Wie oben schon erwähnt ist es ein Präprozessor, der es Entwicklern ermöglicht CSS Dateien zu kompilieren. Lang gewünschte Funktionen wie Variablen oder CSS-Code-Snippets sind möglich. und sollen das Arbeiten mit CSS erleichtern und optimieren.

SASS Workflow

SCHREIBEN – MIXEN – KOMPILIEREN – FERTIG

Na o.k. vielleicht ist es nicht ganz so einfach, aber irgendwie auch schon. Schauen wir uns das mal genauer an:

Schreiben

Anstelle von css Dateien arbeiten wir hier mit SCSS Dateien. Diese können ähnl. wie JS Dateien auch Variablen und Funtionen haben die dann beim Verarbeiten genutzt werden.

Mixen

CSS Eigenschaften einmal schreiben und wiederholt benutzen.

Ganze CSS Blöcke können als Mixin abgelegt werden, um diese immer und immer wieder zu nutzen.

Bsp.:

Anlegen: @mixin abgerundete-ecken {border-radius: 10px; padding: 5px;} 
Benutzen: .mein-button {background-color: green; @include abgerundete-ecken;}

Importieren

Kompilieren

Das Kompilieren der CSS Dateien kann z.B. über die KOmmandozeile entweder „händisch“ oder automatisiert per –watch Befehl angestellt werden. Neben dieser Möglichkeit gibt es auch unterschiedliche GUIs oder Taskplanner (Grunt/Gulp) die diese Arbeit „übernehmen“ können.

sass --watch scss:css

Vorbereitungen für das Arbeiten mit SASS

SASS benötigt RUBY. Unter MacOS ist es i.d.. schon installert, genau wie unter LINUX. Aber auch Windows-User haben es mit den bereitgestellten ruby-installern nicht all zu schwer.

Mögliche Probleme

Es kann sein das das installationsverzeichniss nicht per https geladen werden kann.

> gem install sass
ERROR: Could not find a valid gem 'sass' (>= 0), here is why:
 Unable to download data from https://rubygems.org/ - SSL_connect returned=1 errno=0 state=SSLv3 read server certificate B: certificate verify failed (https://api.rubygems.org/specs.4.8.gz)

 

Lösung

http Download zulassen. Dies kann mit folgendem Befehl (CL) ergänzt werden

gem source -a http://rubygems.org/

nodemon – Node.js Server automatisch neu starten

Monitoring für Node.js

Mit dem Tool „nodemon“ könnt ihr euren Node Server mit einem watch Befehl beobachten, welcher bei Änderungen am Quellcode den Server automatisch neu startet.

Offizelle Projektseite:

https://nodemon.io/

npm

npm install -g nodemon

TIPP: Das Tool sollte/muss mit dem GLOBAL Tag (-g) installiert werden, da es eigene Konsolen Befehle hinzufügt. Unter WINDOWS ggf. die Konsole mit Administrationsrechten öffnen.