kaffeeringe.de

Web-Entwicklung: Flottes CSS mit lessphp

CSS oder LESS?
CSS oder LESS?

Less ist ei­ne fei­ne Sache, um CSS schnel­ler zu ent­wi­ckeln: Variablen, Funktionen und Verschachtelungen ma­chen Stylesheets über­sicht­li­cher und kür­zer. Das Frontend-Framework „Bootstrap von Twitter“ ar­bei­tet zum Beispiel eben­falls mit Less und das be­nut­ze ich zur Zeit sehr ger­ne, um Layouts zu er­stel­len. Das Problem ist nur, dass Less in der Regel per JavaScript in CSS kom­pi­liert wird. Das geht ser­ver­sei­tig per node.js – das kann ich bei mir lei­der nicht in­stal­lie­ren. Oder es geht cli­ent­sei­tig. Dann hängt die schlich­te Formatierung der Seite da­von ab, dass JavaScript funk­tio­niert. Mit les­s­php kann man das aber auch bei Bedarf PHP er­le­di­gen las­sen.

Ich hat­te die Client-Lösung ei­gent­li­ch für ganz okay ge­hal­ten. Die scheint aber wirk­li­ch nur in den al­ler­neus­ten Browsern über­haupt und nur auf schnel­len Rechnern auch no­ch flott zu funk­tio­nie­ren. Es war ein we­nig ner­vig nach der Arbeit am less im­mer dar­an zu den­ken, dass ich wie­der ei­ne sta­ti­sche Version er­stel­le. Eine dau­er­haf­te Lösung mus­s­te her, die nicht vom Browser ab­hän­gig ist. les­s­php ist nun ei­ne ein­fa­che PHP Klasse, die si­ch leicht zum Beispiel in WordPress in­te­grie­ren lässt:

  1. Herunterladen
  2. Entpacken
  3. Ich ha­be die Dateien dann in wp-content/themes/MeinTheme/lib/lessphp/ ab­ge­legt.
  4. Dazu ha­be ich ein Verzeichnis an­ge­legt: wp-content/themes/MeinTheme/css/
  5. In dem Verzeichnis liegt mei­ne style.less, die ich be­ar­bei­te und ich ha­be ei­ne lee­re style.css an­ge­legt und mit Schreibrechten (777) ver­se­hen.
  6. Und dann ha­be ich in der header.php fol­gen­den Code ein­ge­fügt:

1
2
3
4
5
6
<?php
  re­qui­re "lib/lessphp/lessc.inc.php";
  $less = new les­sc;
  $less->che­cked­Com­pi­le(get_template_directory()."/css/style.less", get_template_directory()."/css/style.css");
?>
<link rel="sty­le­s­heet" href="<?php echo get_template_directory_uri(); ?>/css/style.css">

Voila!

les­s­php schaut jetzt im­mer nach, ob die style.less neu­er ist als die style.css und kom­pi­liert sie nur dann neu. Dadurch er­spar 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?