Hallo zusammen,

habt ihr euch auch schon öfters über ausufernde CSS Dateien geärgert? Also jene, die groß, unübersichtlich und schwer zu pflegen sind?
Sicherlich lässt sich hier mit einem detaillierten CSS-Styleguide einiges retten, doch das hilft euch noch nicht wenn an ‚zig Stellen Farben und bestimmte Styles definiert sind und ihr diese anpassen müsst… Ein kleines Beispiel:

Stellt euch eine große Seite oder Web-Applikation vor, die ein durchgehendes Look & Feel hat – Soll heißen, ihr habt für sämtliche Elemente eurer Webseite ein einheitliches Design also z.B. einen schmalen Rahmen (border), einen breiten Abstand zu anderen Elementen (margin) und einen Schlagschatten (box-shadow).

Sollte es zu Änderungen an diesem Style kommen müsst ihr womöglich ‚zig Stellen im CSS Anpassen und anschließend immer und immer wieder Testen. Das ist sehr Zeitaufwändig und ggf. werden einige Stellen übersehen. Um uns solche Unannehmlichkeiten zu ersparen gibt es Sprachen wie less oder auch Sass (auf Sass gehe ich nächste Woche genauer ein).

Was ist „less“ und was kann es bzw. wie hilft es mir?

less sieht in erster Linie nach normalem CSS aus, hat aber einige tolle Features zu bieten! Ich möchte mit ein paar einfachen Beispielen beginnen, die ich mir von der less.js Homepage abgeschaut habe 😉

Wir beginnen mit Variablen – Variablen können sämtliche CSS Eigenschaften beinhalten (Farben, Maßangaben, usw.). Dadurch lässt sich z.B. ein komplettes Farbschema in einigen wenigen Variablen abbilden und überall wiederverwenden!

/* Mit "@xyz" definieren wir Variablen */
@color: #4D926F;

#header {
   color: @color;
}

h2 {
   color: @color;
}

Der obige Code würde von less zu folgendem CSS geparsed:

#header {
   color: #4D926F;
}
h2 {
   color: #4D926F;
}

Variablen lassen sich außerdem auf geniale Weise modifizieren:

@color: #4D926F;
@color-light: @color + #111;
@color-dark: @color - #111;

/* Es gibt außerdem verschiedene Funktionen */
@color-light: lighten(@color, 10%);
@color-dark: darken(@color, 10%);

Weiter geht es mit den so genannten mixins. Jeder CSS Selektor ist gleichzeitig ein „mixin“ und lässt sich an beliebiger Stelle wiederverwenden – Weiterhin lassen sich mixins wie Funktionen Parametrisieren.

.rounded-corners (@radius: 5px) {
   border-radius: @radius;
   -webkit-border-radius: @radius;
   -moz-border-radius: @radius;
}

#header {
   .rounded-corners;
}
#footer {
   .rounded-corners(10px);
}

Daraus ergibt sich folgender CSS Code – Achtung: Parametrisierte mixins tauchen im fertigen CSS nicht weiter als Selektor auf.

#header {
   border-radius: 5px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
}
#footer {
   border-radius: 10px;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
}

Es gibt noch viele weitere Features, wie z.B. Logik-Abfragen in Selektoren, weitere Farb-Funktionen und sogar evaluiertes Javascript innerhalb eurer .less Datei. Wenn ich euch less Schmackhaft machen konnte und ihr mehr Infos wollt, schaut doch bitte auf lesscss.org vorbei.

Wie funktioniert es? Was gibt es für Nachteile?

less kann sowohl Client- als auch Serverseitig ausgeführt werden – Das Client seitige ausführen funktioniert (laut der lesscss-Homepage) nur im Chrome, Safari und Firefox, während auf Server seite Node.js und Rhino zum Einsatz kommen.

Mir persönlich sagt keine der beiden Lösungen zu – Es bieten sich meiner Meinung nach schönere Möglichkeiten an:
Während der Entwicklung würde ich zwar less.js benutzen, doch wenn ich mit dem Projekt live gehe würde ich mir schlicht das gerenderte CSS schnappen und es als normale CSS Datei einbinden. Sicherlich gehen hier ein paar Features verloren (wie z.B. die Javascript evaluierung) doch mir ist die Gefahr zu groß dass das Skript Probleme macht – Vor allem bei älteren Browsern.

Es gibt aber noch eine weitere Möglichkeit der Server seitigen Generierung: lessphp! Jedoch kann ich nicht sagen wie sich hier die JS-Features verhalten bzw. ob diese überhaupt unterstützt werden.

Alles in allem gefällt mir diese Sprache extrem gut und ich werde sie sicherlich bei Gelegenheit einsetzen! Wusstet ihr das sogar Twitters Bootstrap auf less setzt?
Wie sieht es unterdessen mit euch aus? Hat Jemand bereits Erfahrung mit less oder ähnlichen Sprachen?

Ich freue mich über eure Antworten und wünsche eine angenehme Rest-Woche!