Individuelle Webentwicklung

Nicht immer ist eine Standardsoftware ausreichend um individuelle Anforderungen gerecht zu werden, wir schaffen Lösungen

Informationen
Bild: Individuelle Webentwicklung

Mit LESS den CSS-Workflow erweitern

Mit CSS kannst Du Webseiten sehr individuell und einzigartig gestalten. Durch Responsive Design kann diese Seite dann auf das entsprechende Endgerät angepasst werden. Trotzdem ist es für einige Nutzer recht umständlich alle Funktionen direkt zu erfassen oder zu nutzen, da ihnen einzelne Begriffe nicht geläufig sind, oder sie einfach nicht wissen was sie bedeuten. CSS hat sich als eine sehr gute Lösung entwickelt, um Webseiten einen eigenen Charakter zu geben. Durch die Vielzahl von Stylesheets verlieren einige Anwender aber oftmals die Übersicht. Mit LESS wir nun die Arbeit mit CSS wesentlich vereinfacht. Wir zeigen Euch hier die wichtigsten Fakten und Elemente von LESS auf.

LESS, was ist das und was verbirgt sich dahinter?

Grundlegend basiert LESS auf einer sogenannten „Stylesheet-Sprache“. Dadurch wird die Anwendung von CSS erweitert und vereinfacht. Die dynamischen Funktionen und Anwendung von LESS bringen Variablen, Operationen und Mixins ein. Bei modernen Browsern, kann anhand von JavaScript, Rhino oder Node.js auch serverseitig gearbeitet werden. Alles dient der Arbeitserleichterung und einfacheren Handhabung. Die Erstellung von Stylesheet über CSS ist nicht mehr so umständlich und es werden verschiedene Features angeboten um die Arbeit schneller und problemloser zu gestalten.

Anwendung von LESS

LESS bietet ohne serverseitige Einbindung von beispielsweise Node.js eine große JavaScript-Bibliothek. Hier werden einfach die Stylesheets und die entsprechende JavaSkript-Datei in ein HTML-Dokument eingebunden und verarbeitet.
Dabei muss um Problemen der Erkennung und Verarbeitung zu umgehen, unbedingt vor dem Skript das Stylesheet eingebunden werden.

Anleitung:

<link rel=“stylesheet/less“type=”text/css”href=”styles.less”/>

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

Diese Anwendung ist jedoch für den Produktvertrieb nicht ratsam oder vorteilhaft. CSS kann nicht generiert werden, sofern mit einem älteren Browser oder einem deaktivierten JavaScript gearbeitet wird. Auch würde die Performance dadurch leiden und kein optimales Ergebnis erzielt werden. Wenn trotzdem mit Less gearbeitet werden soll, empfiehlt sich unter anderem das Programm Grunt. Dadurch wird ein komplett funktionsfähiges CSS kompiliert.

Anhand von Variablen werden die einzelnen gewünschten Werte klar definiert. Beispielsweise sind Farben oder Farbwerte einfacher abzuändern, da das Suchen entfällt. Alle Werte können variabel zusammengefasst und genutzt werden.

Die sogenannten Mixins werden auf den Plan gerufen, sobald die normalen Klasseneigenschaften nicht mehr ausreichen. Dadurch ist es möglich gewünschte Eigenschaften einer Klasse an eine andere zu vererben. Außerdem können so Variablen parametrisiert werden und auf Wunsch kann dies zu anderen Ergebnissen führen. Als sehr empfehlenswert ist der Einsatz von Mixins bei Projekten, welche mehrere Vendor-Prefixen-Eigenschaften enthalten.

Stylesheets können leider durch beispielsweise Dritte überschrieben, zerstört oder ungewünscht verändert werden. Dies kann geschehen, sobald der Selektor des entsprechenden Stylesheets nicht eindeutig und klar definiert ist. LESS ermöglicht ein Verschachteln der einzelnen Selektoren und somit dient es der Übersichtlichkeit des Stylesheets.

Des Weiteren kannst Du mit Operationen Werte rechnerisch gleich proportional ändern. Dies ist für alle Funktionen anwendbar. Ob Farbwerte, Pixel oder unter anderem Prozentwerte, alles kann addiert, subtrahiert oder dividiert werden.

Fazit:

LESS bietet dem Nutzer zahlreiche Erleichterungen und besonders für größere Vorhaben kann dies viel Zeit einsparen. Die Schreibweise wird wesentlich deutlicher und besser lesbar durch LESS. Trotzdem kann LESS nicht wirklich mehr wie CSS. Es dient im Grunde nur einer Vereinfachung und leichteren Handhabung. Die Funktionen können unkomplizierter angewandt werden und somit ist das Ergebnis schneller sichtbar.