Sprockets und Less.js

Sa 01 Jänner 2011

Filed under Blog

Tags Web Development

Ich möchte kurz zwei Tools vorstellen, die mit in den letzten Monaten durchaus die Arbeit erleichtert haben. Dies sind für die Javascript-Bearbeitung Sprockets und für das Schreiben von CSS less.js. Beides wird von mir derzeit bei der Entwicklung von unserem Webgis ausgiebig eingesetzt.

Sprockets

Auf Sprockets bin ich durch die Prototype-Community aufmerksam geworden. Sprockets ermöglicht es die Javascript Dateien für die Entwicklung in einzelne Files aufzuteilen und dann für den produktiven Einsatz in eine Datei zusammenzufügen.  Dadurch ist es möglich die einzelnen Komponenten wirklich auch unabhängig vom Gesamtwerk zu testen.

Durch die Möglichkeit Abhängigkeiten zu definieren, werden die einzelnen Dateien dann auch „richtig“ zu einem einzigen File zusammengefügt.

Less.js

Less.js (Vorläufer ist das Ruby-Tool LESS)ist ein wunderbares Tool für die Erstellung von CSS-Dateien. Es gibt die Möglichkeit Variablen zu definieren, d.h. man gibt z.B. den RGB-Wert einer Farbe an und greift dann immer über die Variable zu und wenn man die Farbe ändern will macht man das nur noch ein einziges Mal.

Außerdem gibt die Möglichkeit „Funktionen“ zu definieren. Wenn man z.B. öfter einen Border-Radius verwendet, dann erstellt man eine Funktion und ruft diese dann einfach dort auf, wo sie benötigt wird. Der Vorteil ist, dass man dann nicht immer für jeden Browser die Eigenschaften schreiben (am Beispiel border-radius wären das -moz-border-radius, -webkit-border-radius und border-radius), sondern überlässt die Generierung Less.js.

Für Windows hat Duncan Smart in seinem Weblog ein Paket zusammengestellt, da das für Less.js benötigte node.js nicht unter Windows funktioniert. Außerdem gibt es auch noch ein eigenständiges Projekt, das sich .less nennt und auf dem Ruby-Paket basiert.



Über die Seite

Die Inhalte der Seite stehen unter einer Creative Commons Namensnennung 4.0 International Lizenz zur Verfügung Creative Commons Lizenzvertrag

Powered by Pelican and Twitter Bootstrap. Icons by Font Awesome and Font Awesome More