TYPO3 und LESS (CSS) im Backend bearbeiten

8. April 2013

LESS CSS und TYPO3Vor einem guten Jahr hatten wir LESS (CSS) schon mal in der Hand und es dann erstmal unter Beobachtung gestellt. Nun haben wir es bei zwei TYPO3-Projekten eingesetzt.

Wir wollen kurz von unseren Erfahrungen bei der Arbeit mit LESS und der Einbindung in TYPO3 berichten.

Was ist LESS?

Wer mit LESS (CSS) nicht vertraut sein sollte: Die Idee dahinter ist, dass man innerhalb der CSS-Datei Variablen und Code-Blöcke (wieder)verwenden und mit Werten befüllen kann (z. B. @defaultColor und @topLeftRoundBorder(10px) ) oder sogar Berechnungen ausführen kann. Das spart Zeit und macht den Code schlanker.

LESS und TYPO3

Zur Einbindung von LESS haben wir uns am Ende für die TYPO3-Extension t3_less entschieden, weil man Sie am Besten und ohne Probleme zum Laufen bekommt. Zum Kompilieren von .less zu .css haben wir die PHP-basierte Variante im Einsatz. Zum Entwickeln empfiehlt es sich, das Caching (TYPO3 + Extension) zu deaktivieren.

Die Kompilierung der CSS-Datei über JavaScript hat bei uns Probleme bereitet in Verbindung mit anderen jQuery-Tools (wie z.B. dem Flex-Slider), vermutlich weil die CSS-Datei noch nicht fertig von JS kompiliert wurde, wenn der Slider schon loslegen wollte.

LESS-Dateien (*.less) im TYPO3-Backend bearbeiten

Für eine spätere Betreuung der Seite ist es extrem hilfreich, wenn man nicht erst eine SHELL- oder FTP-Verbindung aufbauen muss, um ein paar Styles zu bearbeiten. Per Default kann TYPO3 aber mit den .less-Dateien nichts anfangen. Dazu muss man im Install-Tool folgenden Eintrag vonehmen:

$TYPO3_CONF_VARS[TYPO3_CONF_VARS][SYS][textfile_ext] = txt, css, html, htm, tpl ...... less

Probleme, Nachteile

Ein bisschen gewöhnungsbedürftig ist die Tatsache, dass man bei einem CSS-Tippfehler sofort einen PHP-Error produziert und damit die gesamte Seite nicht erreichbar ist.

Zudem muss man im späteren Live-Betrieb der Seite mit minified CSS im Cache den gesamten Seitencache löschen muss, damit alle Seiten nicht nur die neuen, sondern überhaupt irgendeine CSS-Datei abbekommen. Das ist gerade bei großen Seiten eine Aktion die man sich dreimal überlegen sollte. Hat dafür jemand eine Lösung?

Wir sind gespannt über Eure Erfahrungen, Tipps und Probleme zu TYPO3 und LESS. Vorerst sind wir überzeugt, dass sich der Einsatz von LESS vor allem dann lohnt, wenn man mehrere Projektseiten mit ähnlichem Layout, aber nur verschiedenen Farben aufbauen möchte.

Andere interessante Ansätze

Update 2013-04-08: Grad noch drüber gestolpert: DynCSS auch ein sehr eleganter Ansatz zur Einbindung von CSS-Dateien. Werden wir auch mal noch ausprobieren.

Ähnliche Artikel:

Meta-Daten



Auch mal Kommentieren:

Kommentar