Steffen Voß - Technologie & Gesellschaft

Web-Entwicklung : Flottes CSS mit lessphp

CSS oder LESS?
CSS oder LESS?

Steffen Voß

Less ist eine feine Sache, um CSS schneller zu entwickeln: Variablen, Funktionen und Verschachtelungen machen Stylesheets übersichtlicher und kürzer. Das Frontend-Framework „Bootstrap von Twitter“ arbeitet zum Beispiel ebenfalls mit Less und das benutze ich zur Zeit sehr gerne, um Layouts zu erstellen. Das Problem ist nur, dass Less in der Regel per JavaScript in CSS kompiliert wird. Das geht serverseitig per node.js – das kann ich bei mir leider nicht installieren. Oder es geht clientseitig. Dann hängt die schlichte Formatierung der Seite davon ab, dass JavaScript funktioniert. Mit lessphp kann man das aber auch bei Bedarf PHP erledigen lassen.

Ich hatte die Client-Lösung eigentlich für ganz okay gehalten. Die scheint aber wirklich nur in den allerneusten Browsern überhaupt und nur auf schnellen Rechnern auch noch flott zu funktionieren. Es war ein wenig nervig nach der Arbeit am less immer daran zu denken, dass ich wieder eine statische Version erstelle. Eine dauerhafte Lösung musste her, die nicht vom Browser abhängig ist. lessphp ist nun eine einfache PHP Klasse, die sich leicht zum Beispiel in WordPress integrieren lässt:

  1. Herunterladen
  2. Entpacken
  3. Ich habe die Dateien dann in wp-content/themes/MeinTheme/lib/lessphp/ abgelegt.
  4. Dazu habe ich ein Verzeichnis angelegt: wp-content/themes/MeinTheme/css/
  5. In dem Verzeichnis liegt meine style.less, die ich bearbeite und ich habe eine leere style.css angelegt und mit Schreibrechten (777) versehen.
  6. Und dann habe ich in der header.php folgenden Code eingefügt:

1
2
3
4
5
6
<?php
  require "lib/lessphp/lessc.inc.php";
  $less = new lessc;
  $less->checkedCompile(get_template_directory()."/css/style.less", get_template_directory()."/css/style.css");
?>
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/style.css">

Voila!

lessphp schaut jetzt immer nach, ob die style.less neuer ist als die style.css und kompiliert sie nur dann neu. Dadurch erspar ich den Besuchern den Download der JavaScript-Version von less und das Rendern im Browser.

Pingbacks

  1. less » Marcus Kramer
  2. CSS-Frühjahrsputz und Umstieg auf LESS

Kommentare

Dennis
Dennis:

Nutzen LESS und Twitter Bootstrap nun auch schon seit ein paar Monaten und was soll ich sagen: Wer einmal LESS kenngelernt hat, der will nie wieder einfach nur CSS schreiben.

Ich habe die Javascript-Variante nie getestet, weil wir gleich die PHP-Version eingesetzt haben, kann aber auch nur davon abraten.

Und dank deiner kleinen Anleitung werde ich wohl nun auch den Schritt in meinem Blog wagen und auf LESS umstellen. Danke!

27.11.2012 um 11:35
vielvielkoffein
vielvielkoffein:

Hättest ruhig etwas mehr zu LESS schreiben können.

Für mich ist/war LESS etwas vollkommen Unbekanntes.
Mittlerweile habe ich mich schlau gemacht und mich etwas auf meinem heimischen Apachen ausgetobt.
Echt ne tolle Sache dieses LESS. Wie oft habe ich schon geflucht, alleine nur weil ich keine Variablen setzen konnte.

5.12.2012 um 10:22
Jonathan
Jonathan:

Bin auch großer LESS fan, kompiliere aber alles auf dem Rechner, was etwas nervig ist, wenn man komprimierte und frisch kompilierte CSS Dateien im Git repository hat und immer eine Datei mehr geändert wurde, als eigentlich der Fall ist, bzw ist es nicht notwendig diese Datei unter den Änderungen aufzulisten.

Würde ich sie allerdings nicht integrieren, würde der andere Entwickler auch erst lokal kompilieren müssen.

lessphp nutze ich nur in einer Prestashopinstallation, ist aber trotzdem klasse, dass es den compiler in so vielen Sprachen gibt.

20.12.2012 um 08:29
Expedition Edge
Expedition Edge:

WoW – ich habe zwar grade erst mit CSS angefangen, aber das ist echt ‚kranker scheiß‘. Direkt mal ausprobiert und benutzt.
Endlich kann ich mein CSS so ausführlich kommentieren wie ich will ohne, dass es auf die Performance der webseite geht.

Vielen Dank!

2.1.2013 um 16:29
Chris
Chris:

Ich kompiliere lieber lokal, damit habe ich am Ende eine statische CSS-Datei die einfach nur ausgeliefert werden muss. Caching und so alles schön und gut, aber insgesamt ist das dann vermutlich auch eher Geschmackssache.

Ich bin neulich über Grunt gestolpert und habe zufälligerweise gerade heute einen Artikel darüber geschrieben: http://campino2k.de/2013/01/08/wie-grunt-meinen-workflow-fuer-wordpress-themes-verbessert-hat/

Vielleicht ist da ja was für Dich dabei.

8.1.2013 um 13:22

Schreibe einen Kommentar

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

Möchtest Du per E-Mail benachrichtigt werden, wenn Dir hier jemand antwortet?