Im Kerngedanken war das Web mit seinem elektronisch verfügbaren Content völlig ohne multimediale Inhalte aufgebaut. Früheste Dokumente waren rein informativ und in erster Linie durch deren Textinhalt und semantische Struktur gestaltet, dabei jedoch revolutionär untereinander durch Hyperlinks verknüpft. Schon bald wünschte man sich mehr Ästhetik und HTML wurde bunt.
Teilweise so bunt, dass man später beschloss, einige der eingeführten Neuerungen wie das Blink-Tag wieder aus dem Regelwerk zu entfernen. Mühsam war die Gestaltung zu Zeiten, als noch inline Formatierungen vorgenommen wurden, wodurch es sich als Segen erwies, dass das World Wide Web Consortium auf die Idee kam, einen neuen Standard für die Entwicklung von Web-Dokumenten hinzuzufügen.
Am Anfang war CSS…
Der neue Standard hieß „Cascading Style Sheets“ (oder kurz: „CSS“). Fortan bediente man sich Selektoren, die bereits damals recht dynamisch die Bedingungen für unterschiedlichste Eigenschaften diverser Elemente festlegten. Dabei war es unerheblich, ob es sich um Tags, Klassen, benannte Elemente oder verschachtelte Kind-Objekte handelte. Dieses neue Regelwerk ermöglichte es, Dokumente sehr vielfältig und mit wenig Aufwand ansprechend zu gestalten, da man nun beispielsweise Klassen gleich mehreren Elementen zuweisen konnte, die daraufhin alle Eigenschaften übernommen haben, die in der Klasse festgelegt wurden. Durch Verschachtelung und Selektoren, war es möglich, nur ganz bestimmte Elemente in speziellen Situationen mit Eigenschaften zu versehen, ohne an der entsprechenden Stelle im Seitenquelltext inline Formatierungsangaben hinterlegen zu müssen. Dieser Umstand war insbesondere bei dynamisch bereitgestelltem Inhalt sehr nützlich, da gestalterisch man so auf die Dynamik eingehen konnte, ohne die eigentliche Programmierlogik im Hintergrund dafür in der Tiefe zu verwenden. Alles in Allem sind Cascading Style Sheets auch heute noch ein mächtiges Werkzeug für die Gestaltung von Web-Content.
…und dann kamen Haml, Sass, LESS & Co.
Mit „Haml“ entstand erstmals eine Möglichkeit, über eine Auszeichnungssprache herkömmliche Template-Mechanismen zu vermeiden und mit recht einfacher, sauber eingerückter Syntax dem Entwickler ein elegantes Tool an die Hand zu geben. Ursprünglich war „Sass“ ein Teil von „Haml“, spaltete sich jedoch später ab.
„Sass“, ursprünglich durch seine Bindung an Haml für seine Syntax ohne Klammern und Semikolons beliebt, wandelte sich im Laufe der Zeit und wurde in Version 3 wieder deutlich näher an die CSS-Syntax herangeführt. Semikolons und geschweifte Klammern sind mittlerweile wieder fester Bestandteil der Auszeichnungssprache, um ein Umdenken zu vermeiden, wenn reiner CSS-Code parallel eingesetzt wird. In der Tat wird der CSS3 Standard durch „SCSS“ („Sassy CSS“, Sass3) erweitert und daher auch als ein „Superset“ des CSS-Standards bezeichnet. Für die Installation von Sass wird Ruby vorausgesetzt, was vor allen Dingen auf Microsoft Windows Systemen nicht per default unterstützt wird. Eine Nachinstallation von Ruby kann unter Umständen daher notwendig sein.
“LESS” hingegen basiert auf JavaScript und kann daher so elegant in ein Dokument eingebunden werden, wie eine externe JavaScript-Bibliothek. Die Syntax von LESS ist der von SCSS sehr ähnlich, der wohl auffälligste Unterschied ist, dass in Sass Variablennamen mit einem „$“ beginnen, in LESS wird dem Variablennamen ein „@“ vorangestellt.
Sowohl LESS als auch Sass werden per Präprozessor in CSS-Code umgewandelt. Das Ergebnis ist in jedem Fall reines CSS. Da beide Ansätze einen nahezu vergleichbaren Umfang aufweisen, haben wir uns entschieden, in diesem Artikel alle Beispiele anhand der Syntax von LESS vorzustellen, um keine Verwirrung zu erzeugen.
Wozu braucht man LESS?
Fehlermeldungen
Ein wertvolles Feedback in der täglichen Arbeit mit Style Sheets erhält man bei aufgetretenen Syntaxfehlern. Der Code wird also nicht einfach fehlerhaft interpretiert, sondern es wird bei tatsächlichen Fehlern eine entsprechende Rückmeldung ausgegeben, die bei der Fehlersuche hilft.
Berechnungen
Grundlegende mathematische Berechnungen lassen sich anstellen, um Werte zu ermitteln und ggf. in Variablen zu speichern.
Mixins und Vererbung bei Selektoren
Die Eigenschaften, die beispielshalber in einer Klasse definiert wurden, können an andere Objekte weitergegeben werden. So kann z.B. eine Klasse alle Eigenschaften einer anderen dadurch vererbt bekommen, dass sie den Namen der Ursprungsklasse anstelle einer festzulegenden Eigenschaft aufruft:
Syntaxbeispiel:
.textBox{ border-width: 1px; border-style: solid; } .textBoxRot{ .textBox; border-color: red; } .textBoxBlau{ .textBox; border-color: blue; }
Zu beachten ist ggf. die Position der Referenz auf ein anderes Objekt, da unter Umständen durch nachfolgende, redundante Angaben die Werte überschrieben werden können.
Nesting
Verschachtelte Selektoren können mit Hilfe von geschweiften Klammern „eingenistet“ werden und müssen daher nicht zwangsweise doppelt aufgeführt werden. Über eine optionale Einrückung der jeweils verschachtelten Ebene kann der Entwickler leicht den Überblick behalten.
Syntaxbeispiel
CSS-Syntax
.navigation, .navigation * { font-size: 12px; color: #333; } .navigation a, .navigation a:visited { text-decoration: underline; } .navigation a:visited{ color: #666; }
In LESS
@textColor: #666; @textColorHighlight: #CCC; .navigation{ font-size: 12px; color: @textColor; a{ .navigation; text-decoration: underline; } a:hover{ color: @textColorHighlight; } }
Im Beispiel wird die Klasse “navigation” für ein Container-Element mit Eigenschaften zur Textgestaltung vorgegeben. Enthalten ist ein Link, der explizit die Anweisung bekommt, unterstrichen dargestellt zu werden. Die richtige Farbe erhält er als Unterelement von „.navigation“ durch den Selektor „*“ parallel zugewiesen. Im Hover-Zustand soll jedoch die Farbe wechseln.
In der LESS-Syntax werden zunächst zu Beginn Variablen mit Farben belegt, da diese später auch für Rahmen, Hintergrundflächen, etc. wiederholt verwendet werden sollen.
Durch Nesting wird der Hyperlink innerhalb der Klasse „navigation“ einzeln mit der Unterstreichung formatiert und erbt zugleich durch mixin alle Eigenschaften aus „navigation“. Da der Hover-Zustand des Links nur ein Pseudo-Element ist, erbt dieser ohnehin alle Eigenschaften aus dem “a“-Tag und wird lediglich um die Hover-Farbe erweitert, bzw. diese wird an dieser Stelle überschrieben. Auch hierfür wird die zuvor festgelegte Variable für die Farbe verwendet. Diese kann später auch für andere Elemente verwendet werden. Soll sich diese Farbe im Verlauf des Projekts ändern, kann dies an nur einer Stelle im Code bewerkstelligt werden.
LESS & WordPress
Die Dynamik, die durch LESS in die Gestaltung von Templates einfließen kann, ist nicht zu unterschätzen. Die Zeitersparnis ist besonders bei größeren Projekten mitunter enorm. Viele Projekte werden mittlerweile mit WordPress realisiert. Ein Segen also, dass es auch für die Arbeit mit WordPress mittlerweile Plugins gibt, mit deren Hilfe LESS-Code erzeugt werden kann, der letztlich in Form von CSS für die Projekte zur Verfügung steht. Ein solches Plugin ist „WP-LESS“. Besonders für die Entwicklung eigener Themes und Templates ist dieses Plugin das geeignete Werkzeug.
Weitere Quellen
Fazit
Mit LESS kann eine Menge Dynamik in die Gestaltung von Templates gebracht werden. Die Implementierung in Ihre Web-Projekte ist dank der JavaScript-Basis relativ simpel. Da die Syntax ein CSS-Superset ist, fällt es nicht schwer, sich die Erweiterungsmöglichkeiten schnell anzueignen.
Egal, ob eine individuell gestaltete Website auf einem WebPack oder WebServer mit Hilfe von LESS angepasst werden soll, oder ob der eigene WordPress-Blog ein neues Theme benötigt: Mit LESS ist die Arbeit ein gutes Stück einfacher!
Hat Ihnen dieser Artikel gefallen? Dann bewerten sie den Artikel gerne oder teilen ihn mit Menschen, denen er ebenfalls von Nutzen sein kann – ganz einfach per Twitter, Facebook oder Google+.
Sind Sie an künftigen Neuigkeiten aus dem Hosting-Bereich interessiert? Dann können Sie die Blogbeiträge bequem per RSS-Feed abonnieren oder Sie versehen unsere Facebook-Seite mit einem Like. Die Abo-Funktionalität auf Facebook versorgt Sie zudem jederzeit mit dem aktuellen Blogbeitrag und vielen weiteren Informationen rund um das Hosting im Allgemeinen, aber auch zum Thema Host Europe.
Haben Sie Anregungen oder Änderungsvorschläge? Kommentieren Sie unsere Beiträge, wir freuen uns über Ihren Input!
- Keyword-Recherche mit dem Keyword Planner - 10. Februar 2016
- Die beliebtesten Content Sharing-Erweiterungen für Joomla! - 19. Januar 2016
- E-Commerce mit Erfolgskurs - 25. November 2015
