Sass / SCSS unter Netbeans verwenden

Neben LESS ist Sass bzw. SCSS eine weitere Möglichkeit strukturiert Styles zu schreiben, welche anschließend in CSS kompiliert werden.

Vor nicht allzu langer Zeit bin ich von LESS auf SCSS umgestiegen. Als großen Vorteil sehe ich, dass SCSS das ableiten von CSS-Klassen erlaubt und die generierten CSS-Styles zusammenfasst.

Aufbau von SCSS

Anhand eines kleinen Beispiel, möchte ich das Ableiten demonstrieren:

// Rahmenstyle fuer alle Boxen
.border-style {
    border: 1px solid #000;
    border-radius: 5px;
}

// #box1 erbt von Rahmenstyle
#box1 {
    @extend .border-style;
}

// #box2 erbt von Rahmenstyle
#box2 {
    @extend .border-style;
    width: 50px;
    height: 50px;
}

// #box3 erbt #box2, welcher auch den Rahmenstyle beinhaltet
#box3 {
    @extend #box2;
    background-color: #ff3333;
}

Daraus wird folgender CSS-Code generiert:

.border-style, #box1, #box2, #box3 {
  border: 1px solid #000;
  border-radius: 5px; }

#box2, #box3 {
  width: 50px;
  height: 50px; }

#box3 {
  background-color: #ff3333; }

An diesem Beispiel sieht man, wie alle Styles logisch zusammengefasst wurden. Die generierte CSS-Datei umfasst nur 10 Zeilen. Mittels LESS müsste man die Größenangabe in eine extra Klasse packen und diese in #box2 und #box3 integrieren. Die dadurch entstandene CSS-Datei würde 25 Zeilen umfassen. SCSS ist daher klar im Vorteil.

Natürlich sind auch mit SCSS Variablen, Verschachtelungen und Mixins mit SCSS möglich. Dabei ändert sich nur geringfügig die Syntax, welche man auf der Sass-Seite nachschlagen kann.

Automatische SCSS-Kompilierung unter Netbeans

Um die automatische Kompilierung zu aktivieren, benötigen wir als erstes Ruby für Windows. Wir downloaden den aktuellen RubyInstaller von der Download-Seite. Zu beachten ist bei Installation, dass das Häkchen “Add Ruby executables to your PATH” gesetzt wird. Notfalls könnte man dies auch manuell nachholen.

scss_step1

Im nächsten Schritt öffnen wir die Konsole (Win + R » cmd » ENTER) und installieren Sass mit folgenden Befehl:

gem install sass

Sass wird nun installiert. Mit folgenden Befehl können wir prüfen ob die Installation erfolgreich war:

sass -v

scss_step2

Als nächstes starten wir Netbeans und erstellen in einem neuen / bestehenden Projekt zwei Ordner, mit den Namen scss und css, an.

scss_step3

Wir begeben uns zum Tab Verschiedenes (Miscellaneous) innerhalb der Optionen (Tools » Options) und passen den Pfad zum CSS Preprocessor an. Dazu klicken wir beim “Sass path:” auf “Browse…”

scss_step4

… und wählen die Datei “scss.bat” im bin-Verzeichnis von Ruby aus. Wenn nichts anderes bei der Installation angeben, ist dies der Pfad: “C:\Ruby200\bin”.

scss_step5

Wenn man nicht Debug-Informationen in der generierten CSS-Datei stehen haben möchte, können wir diese mit dem Häkchen “Generate extra information (debug)” ausschalten.

scss_step6

Im nächsten Schritt müssen wir den CSS Preprocessor für unser Projekt aktivieren. Dazu Rechtsklick auf unser Projekt und anschließend auf “Properties” klicken.

scss_step7

Unter “CSS Preprocessors” aktivieren wir Sass mit einem Häkchen auf “Compile Sass Files on Save”.

scss_step8

Jetzt können wir munter SCSS Styles schreiben. Dazu legen wir im Ordner scss eine neue Sass Datei (Sass File…) mit dem Namen styles an.

scss_step9

Beim Anlegen der Datei, wird automatisch die CSS-Datei “styles.css” im Ordner “css” generiert. Bei jeden Speichern der SCSS-Datei wird automatisch die CSS-Datei generiert, welches man auch im Output-Fenster beobachten kann. Im Output-Fenster werden auch Fehler bei der Generierung angezeigt. Als Beispiel habe ich dazu ein Semikolon entfernt:

scss_step11