Dieter Petereit 9. Mai 2012

8 kostenlose Tools: Von CSS zu LESS und wieder zurück

LESS ist eine schöne Sache. Die dynamische Stylesheet-Sprache erweitert CSS um Variablen, Funktionen, Befehle und die sogenannten Mixins. So wird CSS fast zur Programmiersprache. Bindet man less.js in die eigene Website ein, wird LESS zur Laufzeit in CSS kompiliert. Da das nicht in allen Browsern funktioniert, spricht einiges dafür, zwar in LESS zu schreiben, im Live-Betrieb aber doch pures CSS zu verwenden. Hierzu muss LESS wieder nach CSS kompiliert werden.

Umgekehrt stellt sich die Frage, wie starte ich mit LESS, wenn ich schon umfangreiche CSS-Dateien erstellt habe? Kein Problem, sagen LESS-Befürworter, LESS ist ja kompatibel zu CSS. Man ändert also prinzipiell nur den Dateinamen und schon hat man eine LESS-Datei. Das stimmt zwar, berücksichtigt aber nicht, dass echtes LESS deutlich simpler als CSS geschrieben ist. Kein Problem, sagen LESS-Befürworter, stell doch einfach den Code schrittweise um. Immer wenn du an das CSS musst, schreibst du den zu bearbeitenden Bereich in LESS neu. Geht, ist aber bei großen Stylesheets eine langwierige Sache. Schöner wäre es also, wenn man ein Werkzeug hätte, das pures CSS in LESS konvertiert.


Einfach mal weniger (less) schreiben…

Wir haben also zwei Anwendungsfälle: Wir wollen CSS nach LESS bringen, es aber ebenso von LESS wieder zu purem CSS machen. Beides geht mit den folgenden Tools:

Lessify – CSS zu LESS

Lessify ist ein Onlineservice auf der Basis von Lessphp. Er funktioniert mittels Copy/Paste. Man kopiert sein CSS in die Textarea, klickt „Go“ und erhält ein LESS-Sheet. Zumindest das Beispiel auf der Website verspricht gute Ergebnisse. Natürlich wird man Abstriche machen müssen, denn je nach Struktur des eigenen CSS kann das Ergebnis in der Qualität starke Schwankungen zeigen. Lessify macht aus unstrukturiertem Spaghetticode sicherlich kein perfekt strukturiertes LESS-File. Einen Versuch ist das kostenlose Onlinetool aber jedenfalls wert.

LessPHP wiederum gibt es auch als Plugin für WordPress, Symfony und Drupal. Es kompiliert LESS zur Laufzeit, allerdings nicht unter Verwendung von clientseitigem Javascript, sondern serverseitigem PHP.

CSS2LESS – Ebenfalls CSS zu LESS

Eine vergleichsweise elegante Lösung, CSS nach LESS zu konvertieren, stellt CSS2LESS dar. Besonders Freunde der Mac-Optik werden ihre Freude an dem Onlinetool haben. Über ein simples Webinterface, das zugleich über Editor-Funktionalität verfügt, kopiert man sein CSS-Sheet mittels Copy/Paste ein. Nach kurzer Denkpause präsentiert CSS2LESS auf der rechten Bildschirmseite die LESS-Ausgabe. Ebenso wie Lessify ist CSS2LESS kein Heilmittel für schlecht strukturierten Code. Das Beispiel-CSS aus Lessify konvertierte das Tool indes korrekt.

Auch wenn das Editieren des LESS-Codes möglich ist, sollte man nicht fälschlich vermuten, das Tool würde in beide Richtungen arbeiten. Während das Editieren des CSS auf der linken Fensterhälfte zu direktem Umsetzen in LESS führt, passiert während des Editierens des LESS-Codes gar nichts.

CSS2LESS basiert auf der Ruby-Bibliothek gleichen Namens. Das Webtool steht auf GitHub zum Download unter Open Source Lizenz zur Verfügung.

SimpLESS – Compiler für Windows, Mac und Linux

SimpLESS von Kiss steht zum kostenlosen Download für Windows, Mac OS und Linux bereit. LESS-Projekte werden per Drag & Drop in das Anwendungsfenster gezogen. Einmal in die App überführt, können die Dateien darin auch bearbeitet werden. Der Editor ist allerdings nur mäßig komfortabel.

Die Kompilierung der LESS-Files erfolgt automatisch beim Speichern, ein manuelles Anstoßen ist nicht erforderlich. SimpLESS komprimiert die entstehende CSS-Datei ebenfalls automatisiert. Dieser Vorgang lässt sich allerdings durch eine einfache Anweisung im LESS-File ausschalten. Mehrere LESS-Files können in ein CSS geschrieben werden. So ist es möglich, in LESS Dateien funktionsbezogen zu separieren und sie später zur Vermeidung unnötig vieler Requests wieder in eine CSS-Datei schreiben zu lassen.

Die App wird als Open Source entwickelt. Die Developer aus dem Hause Kiss hatten wir vor ein paar Wochen hier bei Dr. Web schon einmal zu Gast. Sie erstellen nämlich auch den CSS-Sprite-Generator SpritePad.

WinLESS – Compiler für Windows

WinLESS ist nicht nur eine LESS-GUI für Windows, sondern auch ein Hintergrundcompiler. Ist ein Ordner mit LESS-Files zu WinLESS hinzugefüpgt, überwacht die Anwendung Änderungen an den Dateien und rekompiliert automatisiert die CSS-Dateien. Da ist es sinnvoll, dass WinLESS direkt mit dem Windows-Start minimiert geladen werden kann. In den Einstellungen der Software lässt sich konfigurieren, ob komprimiertes CSS erstellt werden und wie mit auftretenden Fehlern umgegangen werden soll.

WinLESS wiegt rund 500k und steht unter Apache-Lizenz auf der Produktwebsite zum kostenlosen Download bereit.

Less.app und Codekit – Compiler für Mac OSX

Der aktuelle Favorit der Mac-User hört auf den Namen Less.app und steht in der Version 2.7 für Mac OS X ab 10.6 zum kostenlosen Download bereit. Die Less.app wird nicht mehr fortentwickelt, der Autor setzt seine gesamte Zeit für den Aufbau des kostenpflichtigen Nachfolgers namens CodeKit ein.

Less.app überwacht Website-Ordner auf das Vorhandensein von LESS-Files und kompiliert sie automatisch. Dazu setzt es seit Version 2 das originale Less.js ein und nicht mehr, wie in älteren Versionen das Less-Ruby-Gem. CodeKit, der Nachfolger der App, bietet weit mehr Features und arbeitet nicht nur mit LESS, sondern zusätzlich mit Sass, Compass, CoffeeScript und anderen zusammen.

Crunch! – Die AIR-App ist Editor, Debugger und Compiler zugleich

Crunch ist ein moderner Vertreter seiner Gattung. Mittlerweile in der Version 1.5 vorliegend, ist diese AIR-App einerseits LESS- und CSS-Editor, andererseits LESS-Compiler. Selbst wenn die LESS-Funktionalität nicht so auf Interesse stoßen sollte, erhält man mit Crunch! einen schicken und leistungsfähigen CSS-Editor mit Syntax-Highlighting und integriertem Debugger für umsonst.

Klar ist, dass Air an sich nicht so uneingeschränkt beliebt ist. Insofern mag jeder selbst entscheiden, ob er Crunch! eine Chance geben möchte. Jedenfalls erledigt die App zuverlässig worum es hier geht, es kompiliert LESS nach CSS. Crunch kann in seinen diversen Versionen auf GitHub herunter geladen werden. Aktuell ist die Version 1.5.1.

Dieter Petereit

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design. Man findet ihn auch auf Twitter und Google+.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

2 Kommentare

  1. Hallo
    Ich habe ein WP-Theme Bones (http://themble.com/bones/) heruntergeladen. Nun möchte ich Änderungen am Hintergrund und in der Textfarbe vornehmen. Ich finde aber im Ordner wo sich das Theme befindet kein bones/library/less Verzeichnis. Wie muss ich denn mit dem WinLess-Compiler umgehen?
    Danke für deine Tipps:-)

    • Es ist ja nicht gesagt, dass jedes Theme auch less Dateien mitbringt. Oft wird in less designed, dann zu css kompiliert und diese Dateien dann zur Bearbeitung weiter gegeben.

Schreibe einen Kommentar

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

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.