Bryan Albrecht

Less installation

In diesem Tutorial werde ich erklären, wie Less installiert werden kann und was für Vor- und Nachteile die jeweiligen Varianten mit sich bringen.

In einem folgenden Tutorial werde ich genauer auf die Verwendung von Less eingehen.

Nutzen

Less ist eine Erweiterung für CSS. Es erweitert die Sprache, in dem es Features wie zum Beispiel Variablen, Funktionen und noch viele weitere Techniken hinzufügt, welche das CSS wartbarer machen.

Less Benutzen

Es gibt zwei verschiedene Arten, wie man Less einsetzen kann. Auf der einen Seite gibt es die Server-Seitige Verwendung und auf der anderen die Client-Seitige.

Beide haben ihre Vor- und Nachteile.

Serverseitig

Der einfachste Weg um Less auf dem Server zu installieren, ist das Verwenden vom node.js. Dabei kann man Less ganz einfach über die Kommando-Zeile installieren:

  1. $ npm install -g less

Wenn man Less nun installiert hat, kann man den Compiler wie folgt aufrufen:

  1. $ lessc styles.less

Ebenfalls ist es möglich anzugeben, in welche Datei das Ergebnis gespeichert werden soll:

  1. $ lessc styles.less > styles.css

Um alle verfügbaren Parameter für Less sehen zu können, muss man Less einfach ohne Parameter aufrufen.

Der Vorteil vom serverseitigen Gebrauch ist, dass man keinen Geschwindigkeits-Verlust hat. Dies ist so, da das CSS einmal vom Server kompiliert wird und später vom Client wie gewohnt als CSS heruntergeladen wird.

Ein weiterer Vorteil ist, dass der serverseitige Gebrauch kein JavaScript benötigt.

Clientseitig

Wenn man sich für die clientseitige Benutzung entscheidet, sollte man sich im Klaren sein, dass JavaScript bei jedem Browser verfügbar sein muss, auf welchem die Seite aufgerufen wird. Sonst kann die .less Datei nicht kompiliert werden und es ist kein CSS verfügbar.

Ebenfalls sollte man wissen, dass diese Variante einen Performance Verlust als Folge haben kann. Dies ist so, weil die .less Datei bei jedem Seitenaufruf vom Client neu kompiliert werden muss. Dies kann zur Folge haben, dass die Seite länger braucht, bis sie sich aufbaut.

Um mit der clientseitigen Verwendung zu beginnen, muss man die .less Datei wie eine CSS Datei einbinden:

  1. <link rel="stylesheet/less" type="text/css" href="styles.less" />

Als nächstes muss man less.js herunterladen und einbinden:

  1. <script src="less.js" type="text/javascript"></script>

Wichtig ist, dass die .less Datei vor dem Skript eingebunden ist.

Wenn mehrere .less Stylesheets eingebunden werden, dann werden diese getrennt kompiliert. Das heisst, dass die Variablen und Funktionen nicht von einem anderen Stylesheet aufgerufen werden können.

Der Vorteil von der clientseitigen Verwendung ist, dass Änderungen, welche man in der .less Datei vornimmt, sofort im Browser sichtbar sind. Ebenfalls ist der Einstieg in Less mit dieser Variante einfacher, da man sich nicht mit dem Server auskennen muss.

Schlusswort

Nach diesem Tutorial sollte man grob wissen, was Less ist und wie man es Installiert. Ebenfalls kennt man die Vor- und Nachteile der Installationsmöglichkeiten.

Mit der Anleitung in diesem Tutorial sollte es kein Problem sein Less auf einem Server zu installieren oder auf dem Client zu verwenden.

Less Tutorials

Hier findest du weitere Tutorials, welche mit Less zu tun haben: