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. Eine Detaillierte findest du auf https://howtonode.org/how-to-install-nodejs.

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;
}