SPA: 3. Stylesheets

Node.js und LESS

Wir benutzen LESS als Prefixer und für weitere Zusätze. Ich verwende Webstorm sehr gern für Javascript, CSS und mehr. Um die Dateien auf Änderungen zu überwachen, gibt es in Webstorm eine Option “File Watchers”. Als Ersatz habe ich auch ein eigenes Projekt entwickelt.

Es bietet einige Features mehr und ist Open Source
http://sourceforge.net/projects/luba-filewatcher/

Für Less benötigen wir Node.js
http://nodejs.org/

Nachdem Node.js installiert ist, führen wir folgende Kommandozeile aus.

npm install less

Wir erstellen die Ordner…

~/content/styles/debug
~/content/styles/global
~/content/styles/libs
~/content/styles/views

Wir erstellen die Dateien…

~/content/styles/style.less

Dies ist unsere Hauptdatei. Hier verweisen wir auf alle Unterdateien.

@import "./Global/Normalize";
@import "./Global/Fonts";
@import "./Global/Base";
@import "./Global/Default";

@import "./Views/Index";
@import "./Views/Start";

.Normalize();
.Fonts();
.Default();
.Base();

.Index-View();
.Start-View();

~/content/styles/view/index.less

In der index.less legen wir Eigenschaften für die Hauptansicht fest.

.Index-View() {
   .menu {
      background-color: green;
   }
};

~/content/styles/view/start.less

In der start.less legen wir Eigenschaften für die Startansicht fest.

.Index-View() {
   #start {
      background-color: green;
   }
};

und so weiter…

Nachdem wir alle nötigen Dateien erstellt haben, konfigurieren wir unseren File Watcher, um diese auch auf Änderungen zu überwachen.