CSS-Preprocessors mit Contao

von Alfons Rittler am 01.07.2013

CSS

Die Verwendung von CSS-Preprocessors erleichtern das Leben jedes Frontend-Developers. Die bekanntesten Preprocessors sind SCSS/SASS und LESS. Diese ermöglichen es, erweiterte CSS-Funktionalitäten zu nutzen, die den Workflow verbessern und beschleunigen. Preprocessors arbeiten nicht mit .css-Dateien sondern haben eigene Dateiformate (*.less, *.scss), welche durch die jeweiligen Parser kompiliert werden und am Ende standardkonformes CSS ausgeben. Somit ist man nicht auf die strikte Verwendung von CSS angewiesen, sondern kann sich in einer Welt voller Variablen, Funktionen, Berechnung, uvm. austoben.

Vorbereitung & Installation

Was wird benötigt?


Bevor die "neuen" CSS-Dateien verwendet werden können, muss die Erweiterung [phpless] etwas angepasst werden, da im Extension Repository leider ein veralteter Parser verwendet wird. Hierzu muss die Datei /system/modules/phpless/lessc.inc.php durch die aktuelle Version unter http://leafo.net/lessphp/ ersetzt werden. Alternativ dazu kann auch die Erweiterung manuell von https://github.com/bit3archive/contao-phpless installiert werden.

Nachdem alles installiert wurde, muss unter den Einstellungen der Modus für Theme+ wie folgt ausgewählt werden:

Theme+ Einstellungen


Nun sind die Grundvorraussetzungen abgeschlossen um LESS in Verbindung mit Contao nutzen.

Konfiguration im Contao Backend

Zu allererst wird im theme-Ordner eine neue Datei (style.less) angelegt. Anschließend wird diese über Theme+ hinzugefügt. Unter Layout → Themes →  "Weitere Dateien in das Theme ID X einbinden." auswählen. Anschließend "Neues CSS" auswählen und an der gewünschten Position einfügen.

 

Sobald die Datei über Theme+ hinzugefügt wurde, kann diese im Layout eingebunden werden:

Contao CSS Datei auswählen


Endlich können die ersten Zeilen mit LESS geschrieben werden. Einleitend dazu werden kurze Beispiele angeführt, eine ausführlichere Dokumentation ist unter http://lesscss.org/ vorhanden.

Anwendungsbeispiele

Dateien importieren

Um eine Basis für gutes CSS zu schaffen, ist eine reset/normalize.css sinnvoll. Diese kann in die style.less-Datei importiert werden. Zu beachten ist, dass sich die Datei im gleichen Verzeichnis befindet und die Dateiendung .less hat – anschließend kann die Datei mit @import "/reset.less"; importiert werden.

Variablen

CSS-Preprocessors ermöglichen es, mit Variablen zu arbeiten. Diese können am Dokumentbeginn definiert und anschließend frei verwendet werden. Dies bietet sich für Schriften und Farben an.

Definition von Variablen:

@font-family:arial;
@font-size:  14px; 
@font-color: #666;

Verwendung

body {
  font-family:@font-family;
  font-size:@font-size;
  color:@font-color;
  background:#fff;
}

Arbeitet man mit mehreren Layouts und dazugehörigen CSS-Dateien empfiehlt es sich, die Variablen in eine Datei auszulagern und diese in die Datei zu importieren.

Verschachtelungen

Die Möglichkeit von Verschachtelungen stellt meiner Meinung nach den größten Vorteil von Preprocessors dar. Dadurch sind lange Selektoren Geschichte! Möchte man z.B. ein Logo in einem Header 960px zentriert, absolut, rechts, unten positionieren, würde das mit CSS wie folgt aussehen:

#header {
  height:200px;
}

#header .inside {
  position: relative;
  height:100%;
  width:960px;
  margin:0 auto;
}

#header .inside .logo {
  position:absolute;
  bottom: 0;
  right: 0;
}

Mit der Verwendung von LESS kann die Anweisung auf folgenden Code reduziert werden:

#header {
  height:200px;

  .inside {
    position: relative;
    height:100%;
    width:960px;
    margin:0 auto;

    .logo {
      position:absolute;
      bottom: 0;
      right: 0;
    }
  }
}

Diese Schreibweise reduziert den Aufwand enorm. Das ist nur ein kurzes Beispiel, aber wenn sich diese Arbeitsweise durch die gesamte CSS-Datei(en) zieht, kann ein vielfaches an Code eingespart werden, vor allem die ständige (und nervige) Wiederholung des Elternelements fällt weg. Des Weiteren können Klassen vererbt werden. Dies bietet sich an, um die Breite der Website zu definieren oder Schriftstile zu verwenden. Möchte man den Header und Footer mit 100% Breite verwenden und den Inhalt (.inside) zentrieren, könnte dies über folgende Vererbung erstellt werden:

.wrap {
  position: relative;
  width:960px;
  margin: 0 auto; 
}

#header .inside,
#container,
#footer .inside {
  .wrap;
}

Möchte man einen eigenen Stil für die Überschriften festlegen, könnte dies wie folgt aussehen:

@font-headline:verdana;

.headline {
  font-family:@font-headline;
  text-transform:uppercase;
  color:red;
  font-size:20px;
}

h1 {
  .headline;
}

h2 {
  .headline;
  font-size:18px;
}

Verwendung von Funktionen/Mixins

Funktionen sind ein weiteres Argument für die Verwendung von LESS. Dies macht sich vor allem bewährt, wenn man mit CSS3 arbeitet und auf die Verwendung von Vendor-Prefixes angewiesen ist. Ein Mixin für border-radius sieht wie folgt aus:

.rounded(@radius: 2px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}

Anschließend kann die Funktion jedem beliebigen Element vererbt werden.

.meine-rote-runde-box {
  .rounded(5px);
  background:red;
}

Es gibt bereits eine Vielzahl von vorgefertigten Mixins wie z.B. http://lesselements.com/ oder http://lesshat.com/. Die notwendigen Dateien können in das gleiche Verzeichnis wie die style.less kopiert und anschließend importiert werden.

Ich bevorzuge die Verwendung der Schriftgröße mit der Einheit rem. Dies ist ein CSS3 Befehl und benötigt für die älteren Browser einen Fallback (mit px).

Dazu muss die Schriftgröße immer in beiden Einheiten definiert werden:

body {
  font-size:20px;
  font-size:2rem;
}

Um dies zu umgehen, kann ein Mixin verwendet werden:

.font-size(@sizeValue){
  @pxValue: @sizeValue;
  @remValue: (@sizeValue / 10);
  font-size: ~"@{pxValue}px"; 
  font-size: ~"@{remValue}rem";
}

… und anschließend wie folgt verwendet werden:

body {
  .font-size(20);
}

Für mehr Informationen zu rem und die richtige Verwendung ist folgender Artikel empfehlenswert:
http://snook.ca/archives/html_and_css/font-size-with-rem

Sprites adé

Wer noch mit Sprites arbeitet, um die Server-Requests zu verringern, kann auf diese verzichten und wieder auf einzelne Hintergrundgrafiken umsteigen. Mit dem Parser von Theme+ ist es möglich, dass sämtliche Hintergrundbilder in der eingebundenen *.less-Datei mit Hilfe von base64_encode() in die CSS-Datei eingebettet werden. Einfach unter den Einstellungen wählen, bis zu welcher Größe die Dateien eingebettet werden sollen und die Bilder werden beim Speichern der less-Datei umgewandelt.

In der *.less-Datei können die Bilder wie gewohnt eingebunden werden:

body {
  background:url(../i/background.png);
}

Nachdem die Datei kompiliert wurde, sieht das Hintergrund folgendermaßen aus:

body {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAABQCAYAAABPunpEAAAACXBIW…4I1z+M7uygjwIjTYQCo5ztH5GzjcMNijYxc04b9JDq/wcAn/2dHqXc4mIAAAAASUVORK5CYII=);
}

Ist zwar nicht hübsch, aber es kommt auf die Performance und den Workflow an. Dies ist nur ein kurzer Einblick in die Funktionsweise und Verwendung von Preprocessors (LESS) in Verbindung mit Contao. Wer bis jetzt noch nicht damit gearbeitet hat, sollte spätestens jetzt umsteigen, es wird sich auf jeden Fall bewährt machen!




Zurück

Wir verwenden Cookies auf dieser Website, um Ihren Besuch effizienter und benutzerfreundlicher zu machen.