LESS-CSS ohne Compilierung nutzen, während der Entwicklung

Bewertung:  / 4
SchwachSuper 

LESS-CSS ohne Compilierung nutzen

Less wurde entwickelt um das Konstrukt von CSS-Scripten schlank und übersichtlich zu halten und durch die Verwendung komprimierter CSS-Dateien die Performance von Projekten zu steigern. Zu diesem Ziel werden die LESS-Dateien kompiliert und gecacht. Während der Entwicklung ist das allerdings mitunter etwas schwierig. Wer im Browser dann seine CSS-Eigenschaften versucht zu analysieren (z.B. per Chrome-Webdeveloper oder FireBug) erhält rückwärts wenig verwertbare Informationen. Die Fehlersuche gestaltet sich dann mitunter etwas schwierig. Für diesen Fall ist es sinnvoll die LESS-Dateien wie bisher wie CSS-Scripte verwenden zu können, unkomprimiert.

Das wiederum ist nicht so einfach, weil die Browser LESS nicht verstehen, so als waren es CSS-Dateien, denn LESS wird erst durch das Kompilieren zu CSS. Mit den Funktionen, Variablen, Verschachtelungen und spezifischen Syntax können Browser nichts anfangen. Deshalb sind zwei Dinge notwendig

  1. Wir müssen die LESS-Datei direkt laden, so als wäre Sie CSS-Dateien
  2. Wir müssen daraus im Browser verständliches CSS machen.

Von den LESS-Entwicklern wurde dazu eine Client-seitige Nutzung implementiert und in diesem Text dokumentiert.

Nachfolgend soll kurz beschrieben werden wie die Umsetzung für diesen Fall erfolgen kann

 

 



 

Einbinden des Client-Compiler less.js ins Template

Man kann sich die less.js hier herunterladen und dann wie folgt ins template einbinden:

<script src="less.js" type="text/javascript"></script>

Oder aber man holt sich die aktuelle Version gleich vom Server less.org in dieser Weise:

<script src="https://raw.github.com/less/less.js/master/dist/less-1.4.1.min.js" type="text/javascript"></script>

 

 Innerhalb der Joomla-Templates kann die Einbindung natürlich über die Template-Classe erfolgen:

<?php $gantry->addScript('https://raw.github.com/less/less.js/master/dist/less-1.4.1.min.js', 'text/javascript'); ?>

Diese Variante ist allerdings mit Vorsicht zu genießen, denn Gantry/Joomla lädt immer zunächst alle CSS-Scripte und dann die Java-Scripte. Es ist aber wichtige Voraussetzung, dass die less.js unbedingt vor jeglichem LESS-Script geladen wird!

 

Einbinden der LESS-CSS-Scripte ins Template

Nun kann man in seinem Template d

 

 

thumb.php templates/
gantry/
html/
  • Keine Kommentare gefunden

Einen Kommentar verfassen

Als Gast kommentieren

0
Deine Kommentare erfordern die Moderation durch den Administrator
Nutzungsbedingungen.
Suche - Kategorien
Suche - Inhalt
plg_search_attachments
VM - Search, Virtuemart Product

Ihr Warenkorb

 x 
Ihr Warenkorb ist noch leer.