Sass-Dateien (*.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.

Kompilierung und Navigation über die Kommandozeile

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.

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;
} 

Ö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:

Windows-Befehle zur Navigation

Unter Windows weichen die Befehle leicht ab:

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

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 6 Kommentare

  1. Einsatz verschiedener Webfont-Kombinationen - Blogmemo.de
    schrieb am 26.03.2019 um 12:01 Uhr:

    […] Siehe hierzu: CSS/Custom properties (CSS-Variablen) – SELFHTML-Wiki Einstieg in Sass – SCSS zu CSS kompilieren | kulturbanause® blog […]

    Antworten
  2. Mirco
    schrieb am 06.10.2015 um 14:13 Uhr:

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

    Vielen Dank!

    Antworten
    • Jonas Hellwig
      schrieb am 06.10.2015 um 15:19 Uhr:

      Ja. Beispielsweise so:

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

      Antworten
  3. besercer
    schrieb am 23.03.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

    Antworten
  4. Michel
    schrieb am 05.06.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?

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →