Web-Entwicklung

Flottes CSS mit lessphp

CSS oder LESS?
CSS oder LESS?

Less ist eine fei­ne Sache, um CSS schnel­ler zu ent­wi­ckeln: Varia­blen, Funk­tio­nen und Ver­schach­te­lun­gen machen Style­sheets über­sicht­li­cher und kür­zer. Das Front­end-Frame­work „Boot­strap von Twit­ter“ arbei­tet zum Bei­spiel eben­falls mit Less und das benut­ze ich zur Zeit sehr ger­ne, um Lay­outs zu erstel­len. Das Pro­blem ist nur, dass Less in der Regel per Java­Script in CSS kom­pi­liert wird. Das geht ser­ver­sei­tig per node.js – das kann ich bei mir lei­der nicht instal­lie­ren. Oder es geht cli­ent­sei­tig. Dann hängt die schlich­te For­ma­tie­rung der Sei­te davon ab, dass Java­Script funk­tio­niert. Mit less­php kann man das aber auch bei Bedarf PHP erle­di­gen lassen.

Ich hat­te die Cli­ent-Lösung eigent­lich für ganz okay gehal­ten. Die scheint aber wirk­lich nur in den aller­neus­ten Brow­sern über­haupt und nur auf schnel­len Rech­nern auch noch flott zu funk­tio­nie­ren. Es war ein wenig ner­vig nach der Arbeit am less immer dar­an zu den­ken, dass ich wie­der eine sta­ti­sche Ver­si­on erstel­le. Eine dau­er­haf­te Lösung muss­te her, die nicht vom Brow­ser abhän­gig ist. less­php ist nun eine ein­fa­che PHP Klas­se, die sich leicht zum Bei­spiel in Word­Press inte­grie­ren lässt:

  1. Her­un­ter­la­den
  2. Ent­pa­cken
  3. Ich habe die Datei­en dann in wp-con­ten­t/­the­mes/­Mein­The­me/­li­b/­less­ph­p/ abgelegt.
  4. Dazu habe ich ein Ver­zeich­nis ange­legt: wp-con­ten­t/­the­mes/­Mein­The­me/cs­s/
  5. In dem Ver­zeich­nis liegt mei­ne style.less, die ich bear­bei­te und ich habe eine lee­re style.css ange­legt und mit Schreib­rech­ten (777) versehen.
  6. Und dann habe ich in der header.php fol­gen­den Code eingefügt: 
<?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.

Steffen Voß

Schlagwörter

, , , , ,

Ähnliches Thema

Beliebte Artikel


Neueste Artikel

Folge mir

Kommentare

  1. Avatar von Dennis
    Dennis

    Nut­zen LESS und Twit­ter Boot­strap nun auch schon seit ein paar Mona­ten und was soll ich sagen: Wer ein­mal LESS kenn­ge­lernt hat, der will nie wie­der ein­fach nur CSS schreiben.
    Ich habe die Java­script-Vari­an­te nie getes­tet, weil wir gleich die PHP-Ver­si­on ein­ge­setzt haben, kann aber auch nur davon abraten.
    Und dank dei­ner klei­nen Anlei­tung wer­de ich wohl nun auch den Schritt in mei­nem Blog wagen und auf LESS umstel­len. Danke!

  2. Avatar von vielvielkoffein
    vielvielkoffein

    Hät­test ruhig etwas mehr zu LESS schrei­ben können.
    Für mich ist/​war LESS etwas voll­kom­men Unbekanntes.
    Mitt­ler­wei­le habe ich mich schlau gemacht und mich etwas auf mei­nem hei­mi­schen Apa­chen ausgetobt.
    Echt ne tol­le Sache die­ses LESS. Wie oft habe ich schon geflucht, allei­ne nur weil ich kei­ne Varia­blen set­zen konnte.

  3. Avatar von Jonathan
    Jonathan

    Bin auch gro­ßer LESS fan, kom­pi­lie­re aber alles auf dem Rech­ner, was etwas ner­vig ist, wenn man kom­pri­mier­te und frisch kom­pi­lier­te CSS Datei­en im Git repo­si­to­ry hat und immer eine Datei mehr geän­dert wur­de, als eigent­lich der Fall ist, bzw ist es nicht not­wen­dig die­se Datei unter den Ände­run­gen aufzulisten.
    Wür­de ich sie aller­dings nicht inte­grie­ren, wür­de der ande­re Ent­wick­ler auch erst lokal kom­pi­lie­ren müssen.
    less­php nut­ze ich nur in einer Prestashop­in­stal­la­ti­on, ist aber trotz­dem klas­se, dass es den com­pi­ler in so vie­len Spra­chen gibt.

  4. less » Marcus Kramer

    […] gedacht, dass ich das gan­ze Unter­neh­men wie­der auf­ge­ben müs­se, doch da fan­de ich den Arti­kel: Flot­tes CSS mit less­php auf kaffeeringe.de und nun läuft less auch bei […]

  5. Avatar von Expedition Edge
    Expedition Edge

    WoW – ich habe zwar gra­de erst mit CSS ange­fan­gen, aber das ist echt ‚kran­ker scheiß’. Direkt mal aus­pro­biert und benutzt.
    End­lich kann ich mein CSS so aus­führ­lich kom­men­tie­ren wie ich will ohne, dass es auf die Per­for­mance der web­sei­te geht.
    Vie­len Dank!

  6. Avatar von Chris
    Chris

    Ich kom­pi­lie­re lie­ber lokal, damit habe ich am Ende eine sta­ti­sche CSS-Datei die ein­fach nur aus­ge­lie­fert wer­den muss. Caching und so alles schön und gut, aber ins­ge­samt ist das dann ver­mut­lich auch eher Geschmackssache.
    Ich bin neu­lich über Grunt gestol­pert und habe zufäl­li­ger­wei­se gera­de heu­te einen Arti­kel dar­über geschrie­ben: http://campino2k.de/2013/01/08/wie-grunt-meinen-workflow-fuer-wordpress-themes-verbessert-hat/
    Viel­leicht ist da ja was für Dich dabei.

  7. CSS-Frühjahrsputz und Umstieg auf LESS

    […] der guten Anlei­tung von Stef­fen Voß, wie man einen PHP-Com­pi­ler für LESS in Word­Press instal­liert, habe ich den Umstieg auf LESS auch end­lich hier im Blog gewagt und bin sehr […]

Schreibe einen Kommentar

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