kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Einstieg in Sass – SCSS zu CSS kompilieren

Die Umwandlung von SASS/SCSS-Dateien in CSS-Dateien nennt man Kompilierung (engl: compiling). Mit einigen simplen Befehlen in der Kommandozeile, oder mit Hilfe von Desktop-Apps könnt ihr festlegen, welche Dateien von Sass überwacht werden sollen. Wenn anschließend Änderungen am SCSS-Stylesheet vorgenommen werden, kompiliert Sass die Dateien im Hintergrund automatisch zu CSS. Ich beschreibe in diesem Beitrag wie die Kompilierung über die Kommandozeile funktioniert.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, WordPress, Adobe XD, HTML & CSS Grundlagen, Website-Optimierung …

Jetzt Frühbucher-Rabatte sichern!

Sobald mit Sass gearbeitet wird, darf keine CSS-Datei mehr editiert werden. Änderungen am CSS-Dokument würden von einer Änderung am SCSS-Dokument und der daraufhin erfolgenden automatischen Kompilierung überschrieben.

Kompilierung über die Kommandozeile

Erstellt auf dem Desktop einen Ordner namens Sass-Projektordner und darin ein Stylesheet mit dem Dateinamen style.scss. Als Testinhalt fügt ihr folgenden Code ein:

div {
  width:400px - 200px;
} 

Navigation über die Kommandozeile

Öffnet nun das Kommandozeilen-Programm, z. B. »Terminal« am Mac oder »Start Command Promt with Ruby« unter Windows. Ihr befindet euch standardmäßig in eurem Benutzerverzeichnis.

Die Sass-Befehle auf der Kommandozeilen-Ebene sind identisch – unabhängig davon, ob ihr auf einem Mac oder mit Windows arbeitet. Bei Befehlen, die nicht Sass-spezifisch sind, gibt es allerdings sehr wohl einige Unterschiede. Die folgenden Befehle sollten für den Umfang dieses Beispiels ausreichen. Bitte beachtet, dass ihr mit falschen Befehlen auf der Kommendozeilen-Ebene euren Computer unwideruflich schädigen könnt.

Mac-Befehle zur Navigation

Am Mac lauten die Befehle wie folgt:

  • ls – Zeigt den aktuellen Verzeichnisinhalt an
  • cd – Wechsel ins Home-Verzeichnis dieses Users
  • cd .. – Wechsel in das übergeordnete Verzeichnis
  • cd VERZEICHNIS – Wechsel in VERZEICHNIS (relativ vom aktuellen Standort aus)
  • cd PFAD/ZUM/VERZEICHNIS – Verzeichniswechsel mit Hilfe einer vollständigen Pfadangabe.

Windows-Befehle zur Navigation

Unter Windows weichen die Befehle leicht ab:

  • dir – Zeigt den aktuellen Verzeichnisinhalt an
  • cd\ – Wechsel ins Home-Verzeichnis dieses Users
  • cd.. – Wechsel in das übergeordnete Verzeichnis
  • cd VERZEICHNIS – Wechsel in VERZEICHNIS (relativ vom aktuellen Standort aus)
  • cd PFAD/ZUM/VERZEICHNIS – Verzeichniswechsel mit Hilfe einer vollständigen Pfadangabe.

Nun überprüft in der Kommandozeile in welchem Verzeichnis ihr euch befindet und navigiert in das entsprechende Verzeichnis auf dem Desktop. Wenn ihr euch innerhalb des Ziel-Verzeichnisses befindet, sollte die Auflistung der enthaltenen Dateien die Datei style.scss anzeigen. Die nachfolgenden Abbildung zeigen in magentafarbener Hervorhebung, welche Befehle am Mac im »Terminal« bzw. unter Windows in »Start Command Promt with Ruby« eingegeben wurden:

Navigation ins Zielverzeichnis in Terminal am Mac – Eingegebene Befehle sind magenta hervorgehoben
Navigation ins Zielverzeichnis in Terminal am Mac – Eingegebene Befehle sind magenta hervorgehoben
Navigation ins Zielverzeichnis in »Start Command Promt with Ruby« unter Windows 7 – Eingegebene Befehle sind magenta hervorgehoben
Navigation ins Zielverzeichnis in »Start Command Promt with Ruby« unter Windows 7 – Eingegebene Befehle sind magenta hervorgehoben

SCSS-Dateien in CSS-Dateien umwandeln

Nun geht es daran, die Datei zu kompilieren. Folgender Befehl in der Kommendozeile sucht im aktuellen Verzeichnis (also innerhalb von Desktop/Sass-Projektordner) nach einer style.scss und kompiliert die Datei einmalig in eine style.css.

sass style.scss:style.css 

Der Inhalt der erzeugten CSS-Datei sieht nun so aus:

div {
  width: 200px; }

Die Dateinamen beider Stylesheets müssen übrigens nicht übereinstimmen. Es könnte auch die style.scss in eine kulturbanause.css kompiliert werden. In diesem Fall sähe der Sass-Befehl etwas anders aus:

sass style.scss:kulturbanause.css 

SCSS-Dateien überwachen

Der oben gesehene Befehl kompiliert einmalig. Praktischer ist die Überwachung von Dateien. Folgender Befehl kompiliert die Datei style.scss in eine style.css sobald eine Änderung vorgenommen wurde:

sass --watch style.scss:style.css 
Die Kommandozeile gibt folgende Antwort: Sass is watching for changes. Press Ctrl-C to stop. Hier am Beispiel von Windows
Die Kommandozeile gibt folgende Antwort: Sass is watching for changes. Press Ctrl-C to stop. Hier am Beispiel von Windows

Ordner überwachen

Es ist auch möglich, ganze Ordner zu überwachen. Dazu erstellen wir innerhalb des Projektordners einen weiteren Ordner namens stylesheets. In diesen Ordner verschieben wir die Dateien style.scss und style.css. Zusätzlich erstellen wir noch eine zweite SCSS-Datei ohne Inhalt mit dem Dateinamen reset.scss.

Folgender Befehl kompiliert alle SCSS-Dateien im Verzeichnis stylesheets und gibt die CSS-Dateien im selben Verzeichnis aus.

sass --watch stylesheets:stylesheets
Der Beispielordner im Finder am Mac nach der Kompilierung
Der Beispielordner im Finder am Mac nach der Kompilierung

Ordnerstrukturen überwachen

Nun mag es etwas unübersichtlich sein, dass sich die SCSS-Dateien und die CSS-Dateien im selben Verzeichnis befinden. Daher ist es auch möglich, über Ordner hinweg zu kompilieren. Im nächsten Schritt wollen wir daher die SCSS-Dateien in ein eigenes Verzeichnis auslagern. Dazu erstellen wir innerhalb von stylesheets einen Ordner namens scss. In diesen Ordner verschieben wir die SCSS-Dateien.

Die veränderte Ordnerstruktur
Die veränderte Ordnerstruktur

Um jetzt in dieser Orderstruktur zu arbeiten, genügt folgender Befehl in der Kommandozeile:

sass --watch stylesheets/scss:stylesheets

Ihr könnt auch alle Stylesheets in Ordnern verwalten. Erstellt dazu einen weiteren Ordner namens css in der selben Hierarchieebene wie scss und verschiebt die beiden CSS-Dateien hinein.

Kompilierung über Ordner hinweg
Kompilierung über Ordner hinweg

Wenn ihr in dieser Ordnerstruktur arbeiten möchtet, verwendet folgenden Befehl:

sass --watch stylesheets/scss:stylesheets/css

Fazit

Ihr habt in diesem Beitrag gelernt, wie Sass-Dateien mit Hilfe der Kommandozeile kompiliert werden können. Auch die Kompilierung über Ordner hinweg sollte kein Hindernis mehr darstellen. Weitere Beiträge zum Thema Sass findet ihr hier.

Dieser Beitrag ist ein Auszug aus unserem eBook zum Thema Sass.

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

5 Kommentare

  1. Michel

    Verfasst am 5. Juni 2014 um 10:01 Uhr.

    Danke für deinen Beitrag. Aber ist dies auch direkt auf einem Standard Server online möglich?

    Denn ich arbeite mittlerweile immer direkt online bzw. viele Projekte sind online und erhalten Erweiterungen, alles auf dem Rechner dann zu machen und die Dateien dann neu hochladen finde ich viel zu umständlich.

    Ich hatte mich damals für Less statt Sass entschieden, mit lessphp lasse ich bei einer Änderung der Less Datei autom. eine komprimierte CSS Datei erstellen… dafür muss ich nichts tun, per FTP Programm arbeite ich direkt an der Less Datei, speicher und online erscheint schon die richtige CSS… .

    Gibt es so etwas auch für Sass?

  2. besercer

    Verfasst am 23. März 2015 um 15:11 Uhr.

    Huhu,

    mal eine Frage: Was für Vorteile/Nachteile hat es die Kompilierung Client bzw. Serverseitig zu machen?

    Schönen Gruß
    besercer

  3. Mirco

    Verfasst am 6. Oktober 2015 um 14:13 Uhr.

    Ist es möglich die CSS-Datei bei der Umwandelung auch gleich komprimieren zu lassen?

    Vielen Dank!

    • Jonas Hellwig

      Verfasst am 6. Oktober 2015 um 15:19 Uhr.

      Ja. Beispielsweise so:

      sass –watch –style compressed stylesheets/scss:stylesheets/css

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.