Einstieg in SASS

Dies ist der Start einer kleinen Serie von Blogbeiträgen. Ich möchte nicht zu viel verraten, aber das Endergebnis hat etwas mit der speziellen Zeit des Jahres zu tun, in der wir uns gerade befinden. Die Idee hierzu kam von einer sehr guten Freundin. Daher möchte ich die Chance ergreifen und euch zu Beginn erst einmal eine Einführung in SASS geben. Bevor wir also an den eigentlichen Code gehen, starten wir erst einmal mit den Basics.

SASS installieren

SASS ist das Akronym für "Syntactically Awesome Style Sheets". Man könnte es auch als "Programmieren in CSS" bezeichnen. Um SASS zu verwenden, muss der Code, den man geschrieben hat, in normales CSS kompiliert werden. Hierzu gibt es verschiedene Optionen.

Verwendung des ruby gem

SASS wurde ursprünglich in ruby geschriebeb. Um also mit dieser Version loslegen zu können, muss erst einmal ruby installiert werden. Auf einem Windows-System würde ich euch den RubyInstaller empfehlen. Auf einem Mac kann man Homebrew und das folgende Kommando verwenden.

brew install ruby

Falls ihr Linux verwendet findet ihr ruby vermutlich in eurem Paketmanager. Ich würde euch empfehlen die Version 2.2 oder neuer zu installieren, aber auch ältere Versionen sollen noch funktionieren.

Um schließlich SASS zu installieren, kann man einfach das ruby gem (das SASS "Paket" für ruby) mit diesem Kommando installieren:

gem install ruby

Ihr solltet nun in einer Kommandozeile das ruby Kommando ausführen können.

Verwendung von grunt

Falls ihr euch mit grunt auskennt, könnt ihr auch hierfür ein SASS-Paket installieren und dieses verwenden, um die Dateien zu kompilieren. Es gibt zwei Varianten. Ein Paket basiert auf der ruby Version, eine andere verwendet libsass, eine JavaScript-Implementierung von SASS. Das ruby Paket installiert ihr wir folgt:

npm install grunt-contrib-sass --save-dev

Für die libsass Version, der allerdings einige Features der ruby Version fehlen, installiert ihr dieses Paket:

npm install grunt-sass --save-dev

Verwendung von gulp

Wenn ihr eher mit dem Task Runner gulp arbeitet, dann funktioniert die Installation sehr ähnlich zu grunt. Für die libsass Version installiert ihr dieses Paket:

npm install gulp-sass --save-dev

Auch hier gibt es eine ruby Version, aber ich bin mir nicht sicher, ob sie noch aktiv weiterentwickelt wird:

npm install --save-dev gulp-ruby-sass

SASS kompilieren

Sobald ihr SASS installiert habt, könnt ihr eine SASS-Datei in eine normale CSS-Datei mit folgendem Kommando kompilieren:

sass style.scss style.css

Dieses Beispiel verwendet die alternative SCSS syntax, die beliebter und weiter verbreitet ist, da sie sehr ähnlich zu normalem CSS ist. Das Kommando kompiliert die Datei ein einziges Mal. Da man dieses Kommando natürlich nicht nach jeder kleinen Änderung an einer Datei manuell ausführen möchte bietet SASS einen einfachen "Wachter" an, der Änderungen an einer Datei automatisch erkennt (normalerweise beim Speichern) und die Datei neu kompiliert:

sass --watch style.scss:style.css

Für weiter Optionen solltet ihr einen Blick in die offizielle Dokumentation werfen.

Fazit

Ihr solltet nun in der Lage sein SASS zu verwenden und euren CSS-Entwicklungsprozess zu verbessern. Im nächsten Beitrag werde ich euch, wie man SASS in PhpStorm integiert, eine IDE, die heutzutage sehr viele Entwickler verwenden.

Veröffentlicht von

Bernhard ist fest angestellter Webentwickler, entwickelt in seiner Freizeit Plugins, schreibt in seinem Blog über WordPress und andere Themen, treibt sich gerne bei den WP Meetups in Berlin und Potsdam herum und läuft nach Feierabend den ein oder anderen Halbmarathon.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert