Posts Tagged ‘ LESS

LESS mit Fluid-Templates verwenden in Typo3 4.5

TIPP: Um LESS optimal mit TYPO3 Fluid-Templates nutzen zu können empfehle ich die Verwendung des Fluid-Template-Manager (kurz FTM).

Um Templates und Designs schneller und effektiver zu entwickeln ist es zu empfehlen LESS zu verwenden.
LESS ist eine ähnliche Technik wie SASS bietet einem viele Möglichkeiten wie bspw. Variablen-Definition, Mixins, etc., welche die CSS-Erstellung beschleunigen und die Wiederverwendbarkeit erhöhen.
Vorallem bei der Verwendung vieler neuer CSS3-Features, wo oft jeder Browser sein eigenes Statement erwartet, ist es sinnvoll LESS-Mixins einzusetzen.

Alle Infos und die Dokumentation zu LESS findet Ihr hier:
http://lesscss.org/.

Viele brauchbare Mixins findet man hier:
http://lesselements.com/.

Starten wir nun um ‚mal eben‘ LESS in unser Typo3 einzubinden. Folge einfach den nächsten Punkten Schritt für Schritt:

  1. Als erstes wechseln wir in den Extension-Manager und installieren die notwendigen Extensions. Ich arbeite hier gerne mit der LESS Extension cs_less, da diese einen View-Helper mitbringt, mit dem man sein LESS direkt im Fluid-Template einbinden kann. Da diese jedoch wiederum Abhängigkeiten zu anderen Extensions hat, installieren wir diese beiden zuerst. Dies wären aktuell fed (1.4.12) und flux (1.4.1). Nach dem die beiden Extensions importiert und installiert sind, nur noch schnell die cs_less Exxtension hinterher installieren
  2. Nach dem die notwendigen Extensions vorhanden sind können wir beginnen unsere LESS-Dateien zu erstellen. Die erste nennen wir styles.less und legen sie in unserem fileadmin/templates/css/-Verzeichnis ab. Danach laden wir uns die less-elements runter, und legen die Datei elements.less in das gleiche Verzeichnis.
  3. In unsere styles.less importieren wir die less-elements und wenden zum testen einfach mal Gradient auf den Body-Tag an:
    @import "elements.less";
    body {
       .gradient(#F00, #F00, #FFF);
    }
    

    .gradient() ist an dieser Stelle ein Mixin, welches von den less-elements bereitgestellt wird. Das .gradient() Mixin ist mit einer Funktion vergleichbar, welche drei Parameter erwartet. Als Rückgabe fügt diese bei der Compilierung des LESS alle erforderlichen CSS-Statements für die jeweiligen Browser in das CSS ein.
    Das Ergebnis sieht wie folgt aus:

    body {
      background:#ff0000;
      background:-webkit-gradient(linear,left bottom,left top,color-stop(0,#ff0000),color-stop(1,#ffffff));
      background:-ms-linear-gradient(bottom,#ff0000,#ffffff);
      background:-moz-linear-gradient(center bottom,#ff0000 0%,#ffffff 100%);
    }
    
  4. Nun müssen wir nur noch den View-Helper der cs_less-Extension verwenden, um unser LESS einzubinden. An diesem Punkt gehen ich einfach mal davon aus, das eh schon Fluid als Template-Engine verwendet wird 😉
    Also öffnen wir uns die Layout-Datei unseres Fluid-Templates. Meine liegt bspw. unter /fileadmin/templates/layouts/main.html. Wir öffnen diese und fügen den folgenden Code hinzu:

    {namespace less=Tx_CsLess_ViewHelpers}
    <less:style href="fileadmin/templates/css/styles.less" />

    In der ersten Zeile definieren wir den Namespace, in dem unser View-Helper zu finden ist. Danach wird dieser einfach nur noch verwendet. Das Attribute href bekommt den Pfad zu unserer Less-Datei, alles andere passiert automatisch. Wenn man nun alle seine Styles über die LESS-Datei definiert, ist keine weitere CSS-Datei notwendig. Natürlich kann man auch normales CSS in der LESS-Datei verwenden, aber das kann man alles auf der LESS-Dokumentation nachlesen. 😉