CSS-Preprocessors mit Contao

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.

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.

• Umfrage zur Verwendung von Preprocessors auf css-tricks.com: http://css-tricks.com/poll-results-popularity-of-css-preprocessors/
• LESS: http://lesscss.org/
• SASS: http://sass-lang.com/ 
• LESS vs. SASS: http://coding.smashingmagazine.com/2011/09/09/an-introduction-to-less-and-comparison-to-sass/