LESS installieren und anwenden

LESS ist ein Präprozessor der CSS mit Variablen , Funktionen und Vererbung erweitert. Dadurch kann eine saubere und schnellere Entwicklung von CSS gewährleistet werden. Dieser Beitrag zeigt wie ihr LESS auf dem Computer installiert und LESS compiliert.

Node.js installieren

Node.js ist ein Javascript Server, mit dem lassen sich Javascripte im Backend ausführen. Einfach runterladen und installieren: Downloadseite.

Git installieren

Es ist ratsam noch die Git Konsole zu installieren. Git CLI Downloadseite.

LESS Modul installieren

Öffnet die Konsole, bei Windows einfach in das Suchfeld CMS eintippen und Enter drücken. Danach fügt ihr folgenden Befehl in die Konsole ein:

npm install -g less

LESS compilieren

Zuerst erstellt ihr eine style.less Datei in eurem Projekt-Verzeichnis. In diese Datei schreibt ihr folgenden LESS Code:

@colorred: #dd0005;
@colorgreen: #00dd00;

.redtext {
  color: @colorred;
  a{
    color: @colorred;
  }
}

.greentext {
  color: @colorgreen;
  a{
    color: @colorgreen;
  }
}

Mit dem less comman könnt ihr nun die LESS Datei in CSS compilieren.

lessc style.less style.css

Aus diesem Code wird dann folgende CSS generiert:

.redtext {
  color: #dd0005;
}
.redtext a {
  color: #dd0005;
}
.greentext {
  color: #00dd00;
}
.greentext a {
  color: #00dd00;
}

LESS minify CSS Datei

Um deine LESS Dateien minimiert (minify, minimize), also so klein wie nur möglich, auszugeben ist folgender Befehl zuständig:

minify installieren

npm install less-plugin-clean-css -g

minify anwenden

lessc -clean-css style.less style.css

Jetzt wird deine CSS Datei, ohne Zeilenumbrüche und so wenig wie möglich an Leerzeichen, compiliert. Das hat den Vorteil, dass deine Seite später schneller lädt.

Beispiel

@colorred: #dd0005;
@colorgreen: #00dd00;

.redtext {
  color: @colorred;
  a{
    color: @colorred;
  }
}

.greentext {
  color: @colorgreen;
  a{
    color: @colorgreen;
  }
}

Der LESS Code wird zu folgenden minimierten CSS:

.redtext{color:#dd0005}.redtext a{color:#dd0005}.greentext{color:#0d0}.greentext a{color:#0d0}

Zum nächsten Teil: LESS Dateien importieren
Zur Tutorialübersicht: LESS Tutorial