Sass & Compass Entwicklung in NetBeans

Wir setzten bei Template-Entwicklung den Präprozessor Sass (Syntactically Awesome Stylesheets) und CSS Authoring Framework Compass ein. Der Einsatz dieser Tools erleichtert die Erzeugung von Cascading Stylesheets deutlich. Umfangreiche Änderungen am Template lassen sich nachträglich damit zeitsparender umsetzen. In diesem Tutorial zeigen wir, wie Sie Sass & Compass in der Netbeans IDE einrichten.

Installationsvoraussetzungen:

Für den Einsatz von Sass benötigen Sie Ruby auf Ihrem Mac, dies ist allerdings standardmäßig schon vorinstalliert.

Sass installieren

Nun öffnen Sie die Terminal Konsole (Dienstprogramme) und geben zur Installation folgendes Kommando ein:
sudo gem install sass

Um die erfolgreiche Installation zu prüfen, anschließend dieses Kommando ausführen:
sass -v

Damit wird Ihnen die aktuelle Sass Version angezeigt. Um später bei einem Update von Sass oder Compass die aktuellsten Versionen zu erhalten einfach nachfolgende Zeile eingeben, und Sie sind wieder up to date.

sudo gem update

Compass installieren

Fast identisch läuft es bei der Installation von Compass ab. Mit dieser Zeile holen Sie sich das CSS Authoring Framework auf Ihren Mac.

sudo gem install compass

Sass & Compass in Netbeans integrieren

Klicken Sie hierfür in Ihrem neuen Projekt in den Projekteigenschaften auf „CSS Preprocessors“ und darin auf „Configure Executables“. Hier reicht ein Klick auf „Search“ um die Pfad zu Sass automatisch anzugeben.

NetBeans CSS Preprocessors

Anschließend mit „Apply“ und „OK“ bestätigen.

NetBeans Projekteigenschaften

Damit beim Speichern der .scss Datei automatisch die dazugehörige .css Datei angelegt und beim Speichern aktualisiert wird müssen Sie folgende Eigenschaften konfigurieren.

Projekteigenschaften für Sass

Erklärung

Die Checkbox „Compile Sass Files on Save“ triggert die Generierung der CSS Dateien. Wie in dem Screenshot zu sehen, sollten Sie die Input (.scss) bzw. Output (.css) Pfade festlegen.

Durch den Parameter –compass in den „Compiler Options“ wird nicht mehr der standardmäßige Sass Compiler verwendet, sondern der Compass Compiler.

Damit ist die NetBeans Konfiguration für Sass & Compass auch schon komplett. Wir wünschen euch viel Spaß beim Testen und Experimentieren. Wie sind Ihre Erfahrungen mit Sass & Compass?

Schreibe einen Kommentar

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

Andere interessante Beiträge