kaffeeringe.de

Web-Entwicklung: Flottes CSS mit lessphp

CSS oder LESS?
CSS oder LESS?

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

Nutzen LESS und Twitter Bootstrap nun auch schon seit ein paar Monaten und was soll ich sa­gen: Wer ein­mal LESS kenn­ge­lernt hat, der will nie wie­der ein­fach nur CSS schrei­ben.

Ich ha­be die Javascript-Variante nie ge­tes­tet, weil wir gleich die PHP-Version ein­ge­setzt ha­ben, kann aber auch nur da­von ab­ra­ten.

Und dank dei­ner klei­nen Anleitung wer­de ich wohl nun auch den Schritt in mei­nem Blog wa­gen und auf LESS um­stel­len. Danke!

vielvielkoffein

Hättest ru­hig et­was mehr zu LESS schrei­ben kön­nen.

Für mi­ch ist/war LESS et­was voll­kom­men Unbekanntes.
Mittlerweile ha­be ich mi­ch schlau ge­macht und mi­ch et­was auf mei­nem hei­mi­schen Apachen aus­ge­tobt.
Echt ne tol­le Sache die­ses LESS. Wie oft ha­be ich schon ge­flucht, al­lei­ne nur weil ich kei­ne Variablen set­zen konn­te.

Jonathan

Bin auch gro­ßer LESS fan, kom­pi­lie­re aber al­les auf dem Rechner, was et­was ner­vig ist, wenn man kom­pri­mier­te und fri­sch kom­pi­lier­te CSS Dateien im Git re­po­si­to­ry hat und im­mer ei­ne Datei mehr ge­än­dert wur­de, als ei­gent­li­ch der Fall ist, bzw ist es nicht not­wen­dig die­se Datei un­ter den Änderungen auf­zu­lis­ten.

Würde ich sie al­ler­dings nicht in­te­grie­ren, wür­de der an­de­re Entwickler auch er­st lo­kal kom­pi­lie­ren müs­sen.

les­s­php nut­ze ich nur in ei­ner Prestashopinstallation, ist aber trotz­dem klas­se, dass es den com­pi­ler in so vie­len Sprachen gibt.

Expedition Edge

WoW – ich ha­be zwar gra­de er­st mit CSS an­ge­fan­gen, aber das ist echt ‚kran­ker scheiß‘. Direkt mal aus­pro­biert und be­nutzt.
Endlich kann ich mein CSS so aus­führ­li­ch kom­men­tie­ren wie ich will oh­ne, dass es auf die Performance der web­sei­te geht.

Vielen Dank!

Chris

Ich kom­pi­lie­re lie­ber lo­kal, da­mit ha­be ich am Ende ei­ne sta­ti­sche CSS-Datei die ein­fach nur aus­ge­lie­fert wer­den muss. Caching und so al­les schön und gut, aber ins­ge­samt ist das dann ver­mut­li­ch auch eher Geschmackssache.

Ich bin neu­li­ch über Grunt ge­stol­pert und ha­be zu­fäl­li­ger­wei­se ge­ra­de heu­te ei­nen Artikel dar­über ge­schrie­ben: http://campino2k.de/2013/01/08/wie-grunt-meinen-workflow-fuer-wordpress-themes-verbessert-hat/

Vielleicht ist da ja was für Dich da­bei.

Schreibe einen Kommentar

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

Möchtest Du benachrichtigt werden, wenn Dir hier jemand antwortet?