LESS Tutorial

LESS ist eine „Programmiersprache“, aus der CSS generiert werden kann. Die Sprache erweitert sozusagen CSS mit Funktionen und Variablen, wenn du tiefer eintauchst, wirst du noch Mixins kennen lernen und dir gewünscht haben, schon immer mit LESS gearbeitet zu haben.

LESS Vorteile gegenüber von CSS

Die 2 größten Vorteile für Anfänger sind Funktionen und Variablen, dadurch kann man CSS übersichtlicher und dynamischer machen. Du kannst z.B. ein Farbwert in eine Variable speichern und verwendest im restlichen LESS Code diese Variable, falls du dann mal eine neue Farbgebung ausprobieren möchtest, brauchst du nur die Variable zu ändern und an allen LESS Code Stellen wird dieser Farbwert benutzt. Man kann Funktionen definieren, z.B. einen Kreis zeichnen, an diese Funktion wird dann, über ein Parameter, ein Farbwert übergeben und diese Funktion generiert dann einen, immer gleichgroßen, Kreis mit unterschiedlichen Farben. Ich verwende auf meiner Website Funktionen um einen Schatteneffekt in allen Browser unterschiedlichen Werten zu generieren.

.shadow(@param) {
  -webkit-box-shadow: @param;
  -moz-box-shadow:    @param;
  box-shadow:         @param;
}

Ich habe ein kleines Tool programmiert, mit diesem kannst du LESS Code ausprobieren: LESS im Browser compilieren.

Tutorials zu LESS

installieren, compilieren und minimieren

Um auf deinem Computer LESS Code zu CSS Compilieren, benötigst du Node.js und das dazugehörige Paket. Wie du die Programme installierst und den ersten LESS Code compilierst, lernst du in diesem Tutorial: LESS installieren und anwenden.

in mehrere Dateien aufteilen

Um in großen Projekten dein Code übersichtlich zu halten, empfiehlt es sich, den Code auf mehrere Dateien zu verteilen. Am besten eine Datei für Variablen, eine für Mixins und dann pro Feature eine Datei (Header, Footer oder Autorenbox). LESS Dateien importieren

LESS Variablen

Das beste an LESS, die Variablen. In kürzester Zeit, das komplette Farbschema der Seite überarbeiten. LESS Variablen

Mixins

Hier ist der Part für Fortgeschrittene, die Mixins. Du kannst damit ganze CSS Eigenschaften Vordefinieren und an eine Klasse dranhängen, des weiten sind Mixins über Parameter dynamisch gestaltbar. LESS Mixins