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
- Wir müssen die LESS-Datei direkt laden, so als wäre Sie CSS-Dateien
- 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