LESS CSS - Anfängerhandbuch

CSS Pre-Prozessor ist jetzt ein Standard in der Web-Entwicklung geworden. Es liefert einfaches CSS mit Programmiermerkmalen wie Variablen, Funktionen oder Mixin und Operation, die es Webentwicklern ermöglichen, modulare, skalierbare und besser verwaltbare CSS-Stile zu erstellen.

In diesem Beitrag werden wir uns mit LESS beschäftigen, einem der beliebtesten CSS-Preprozessoren, und auch in zahlreichen Frontend-Frameworks wie Bootstrap eingesetzt. Wir werden auch die grundlegenden Dienstprogramme, Tools und Setups durchgehen, um Ihnen den Einstieg in LESS zu erleichtern .

Der Compiler

Zu Beginn müssen wir einen Compiler einrichten. Die LESS-Syntax ist nicht standardgemäß, gemäß W3C-Spezifikation. Der Browser könnte die Ausgabe nicht verarbeiten und rendern, obwohl er ähnliche Eigenschaften wie CSS erbt.

Hier ist ein Blick auf LESS-Code:

 @ Farbbasis: # 2d5e8b; .class1 {Hintergrundfarbe: @ Farbbasis; .class2 {Hintergrundfarbe: #fff; Farbe: @ Farbe-Basis; }} 

Der Compiler wird den Code verarbeiten und die LESS-Syntax in ein browserkonformes CSS-Format umwandeln:

 .class1 {Hintergrundfarbe: # 2d5e8b; } .class1 .class2 {Hintergrundfarbe: #fff; Farbe: # 2d5e8b; } 

Es gibt eine Reihe von Tools zum Kompilieren von CSS:

Verwenden von JavaScript

LESS kommt mit einer less.js Datei, die sich sehr einfach auf Ihrer Website implementieren lässt. Erstellen Sie ein Stylesheet mit der Erweiterung .less und verknüpfen Sie es mit dem Attribut rel="stylesheet/less" in Ihrem Dokument.

Sie können die JS-Datei hier herunterladen, sie über den Bower-Paket-Manager herunterladen, ansonsten direkt mit CDN verbinden, so:

Sie sind alle eingestellt und können Stile innerhalb der .less . Die LESS-Syntax wird im laufenden Betrieb kompiliert, wenn die Seite geladen wird. Beachten Sie, dass die Verwendung von JavaScript in der Produktionsphase nicht empfohlen wird, da dies die Leistung der Website beeinträchtigen wird .

Sie sollten die LESS-Syntax immer zuvor kompilieren und stattdessen nur reguläres CSS verwenden. Sie können Terminal, einen Task Runner wie Grunt oder Gulp oder eine grafische Anwendung dazu verwenden.

Verwenden von CLI

LESS stellt eine native Befehlszeilenschnittstelle (CLI), lessc, lessc, die mehrere Aufgaben lessc, die über das Kompilieren der LESS-Syntax hinausgehen. Mit der CLI können wir die Codes filtern, die Dateien komprimieren und eine Quellkarte erstellen. Der Befehl basiert auf Node.js, wodurch der Befehl effektiv über Windows, OS X und Linux ausgeführt werden kann.

Stellen Sie sicher, dass Node.js installiert wurde (andernfalls greifen Sie hier auf das Installationsprogramm zu), und installieren Sie dann LESS CLI über NPM (Node Package Manager) mithilfe der folgenden Befehlszeile.

 npm install -g weniger 

Jetzt haben Sie den lessc Befehl zur Verfügung, um LESS in CSS zu kompilieren:

 lessc style.less style.css 

Verwenden von Task Runner

Task Runner ist ein Tool, das Entwicklungsaufgaben und Workflows automatisiert. Anstatt den lessc Befehl jedes Mal lessc wenn wir unsere Codes kompilieren möchten, können wir einen Task-Runner installieren und so einstellen, dass er Änderungen in unseren LESS-Dateien beobachtet und LESS sofort in CSS kompiliert.

Zwei beliebte Werkzeuge in dieser Kategorie sind Grunt und Gulp. Wir haben eine Reihe von Post, die diese Werkzeuge abdecken. Überprüfen Sie die Posts, um zu erfahren, wie Sie diese Tools in Ihrem Workflow bereitstellen.

• Wie man Grunt verwendet, um Ihren Arbeitsablauf zu automatisieren
• Erste Schritte mit Gulp.js
• Der Kampf der Build-Skripte: Gulp Vs Grunt

Grafische Anwendung verwenden

Für diejenigen, die es nicht gewohnt sind, Terminal- und Befehlszeilen zu verwenden, können sie sich stattdessen für eine grafische Oberfläche entscheiden. Es gibt eine Fülle von Anwendungen, um LESS heute für alle Plattformen zu kompilieren - einige kostenlos, andere kostenpflichtig

Hier ist die vollständige Liste:

App	Plattform	Kosten
Mischung	OS X / Windows	Frei
Koala	OS X / Windows / Linux	Frei
Präpros	OS X / Windows	Freemium (USD29)
WinLESS	Windows	Frei
CodeKit	OS X	USD32

Für welchen Compiler Sie sich entscheiden (abgesehen von JavaScript) spielt es eigentlich keine Rolle, ehrlich gesagt, solange das Tool funktioniert und Ihren Workflow ergänzt, entscheiden Sie sich dafür.

Der Code-Editor

Sie können einen beliebigen Code-Editor verwenden. Installieren Sie einfach ein Plugin oder eine Erweiterung, um die LESS-Syntax mit den richtigen Farben hervorzuheben, eine Funktion, die jetzt für fast alle Code-Editoren und IDEs einschließlich SublimeText, Notepad ++, VisualStudio, TextMate und Eclipse verfügbar ist.

Jetzt, da wir den Compiler und den Code-Editor eingerichtet haben, können wir mit CSS-Styles mit LESS-Syntax beginnen.

Weniger Syntax

Im Gegensatz zu normalem CSS, wie wir es kennen, funktioniert LESS viel mehr wie eine Programmiersprache. Es ist dynamisch, also erwarten Sie einige Terminologien wie Variablen, Operation und Scope auf dem Weg.

Variablen

Sehen wir uns zuerst die Variablen an .

Wenn Sie ziemlich lange mit CSS gearbeitet haben, haben Sie wahrscheinlich so etwas geschrieben, wo wir im Deklarationsblock im gesamten Stylesheet repetitive Werte zugewiesen bekommen haben.

 .class1 {Hintergrundfarbe: # 2d5e8b; } .class2 {Hintergrundfarbe: #fff; Farbe: # 2d5e8b; } .class3 {Rahmen: 1px fest # 2d5e8b; } 

Diese Praxis ist in Ordnung - bis wir feststellen müssen, dass wir mehr als tausend oder mehr ähnliche Snippets im gesamten Stylesheet durchsehen müssen. Dies könnte passieren, wenn Sie eine groß angelegte Website erstellen. Die Arbeit wird langweilig.

Wenn wir einen CSS-Pre-Processor wie LESS verwenden, wäre die obige Instanz kein Problem - wir können Variablen verwenden . Mit den Variablen können wir einen konstanten Wert speichern, der später im gesamten Stylesheet wiederverwendet werden kann.

 @ Farbbasis: # 2d5e8b; .class1 {Hintergrundfarbe: @ Farbbasis; } .class2 {Hintergrundfarbe: #fff; Farbe: @ Farbe-Basis; } .class3 {Rahmen: 1px solid @ color-base; } 

Im obigen Beispiel speichern wir die Farbe #2d5e8b in der Variablen @color-base . Wenn Sie die Farbe ändern möchten, müssen wir nur den Wert in dieser Variable ändern.

Neben der Farbe können Sie auch andere Werte in die Variablen eingeben, wie zum Beispiel:

 @ font-family: Georgia @ Punktgrenze: dotted @transition: linear @opacity: 0.5 

Mixins

In LESS können wir Mixins verwenden, um ganze Deklarationen in einem CSS-Regelsatz in einem anderen Regelsatz wiederzuverwenden. Hier ist ein Beispiel:

 .gradienten {Hintergrund: #eaeaea; Hintergrund: linear-gradient (oben, #eaeaea, #cccccc); Hintergrund: -o-linear-gradient (oben, #eaeaea, #cccccc); Hintergrund: -ms-linear-gradient (oben, #eaeaea, #cccccc); Hintergrund: -moz-linear-gradient (oben, #eaeaea, #cccccc); Hintergrund: -webkit-linear-gradient (oben, #eaeaea, #cccccc); } 

Im obigen Snippet haben wir eine Standardfarbe für den Farbverlauf innerhalb der Klasse .gradients voreingestellt. Wann immer wir die Gradienten hinzufügen möchten, fügen wir einfach die .gradients diese Weise ein:

 div {.Stämme; Grenze: 1px Körper # 555; Rand-Radius: 3px; } 

Die .box erbt den gesamten Deklarationsblock in den .gradients . Die obige CSS-Regel entspricht also dem folgenden einfachen CSS:

 div {Hintergrund: #eaeaea; Hintergrund: linear-gradient (oben, #eaeaea, #cccccc); Hintergrund: -o-linear-gradient (oben, #eaeaea, #cccccc); Hintergrund: -ms-linear-gradient (oben, #eaeaea, #cccccc); Hintergrund: -moz-linear-gradient (oben, #eaeaea, #cccccc); Hintergrund: -webkit-linear-gradient (oben, #eaeaea, #cccccc); Grenze: 1px Körper # 555; Rand-Radius: 3px; } 

Wenn Sie außerdem viel CSS3 in Ihrer Website verwenden, können Sie LESS Elements verwenden, um Ihre Arbeit zu vereinfachen. LESS Elements ist eine Sammlung gängiger CSS3-Mixins, die wir häufig in Stylesheets verwenden, z. B. border-radius, gradients, drop-shadow und so weiter.

Um LESS Elements zu verwenden, fügen @import einfach die @import Regel in Ihr LESS-Stylesheet ein, aber vergessen Sie nicht, es zuerst herunterzuladen und es in Ihr Arbeitsverzeichnis @import .

 @import "elements.less"; 

Wir können jetzt alle Klassen wiederverwenden, die von den elements.less zur Verfügung gestellt werden. 3px zum Beispiel 3px border radius zu einem div hinzuzufügen, können wir schreiben:

 div {.rounded (3px); } 

Weitere Informationen finden Sie in der offiziellen Dokumentation.

Verschachtelte Regeln

Wenn Sie Stile in einfachem CSS schreiben, haben Sie möglicherweise auch diese typischen Codestrukturen durchschaut.

 nav {Höhe: 40px; Breite: 100%; Hintergrund: # 455868; Grenze-unten: 2px fest # 283744; } nav li {Breite: 600px; Höhe: 40px; } nav li a {farbe: #fff; Zeilenhöhe: 40px; Text-Schatten: 1px 1px 0px # 283744; } 

Im einfachen CSS wählen wir untergeordnete Elemente aus, indem wir zuerst auf das übergeordnete Element in jedem Regelwerk abzielen, was erheblich redundant ist, wenn wir dem "Best Practices" -Prinzip folgen.

In LESS CSS können wir die Regelsätze vereinfachen, indem wir die untergeordneten Elemente wie folgt in die Eltern verschachteln:

 nav {Höhe: 40px; Breite: 100%; Hintergrund: # 455868; Grenze-unten: 2px fest # 283744; li {Breite: 600px; Höhe: 40px; a {Farbe: #fff; Zeilenhöhe: 40px; Text-Schatten: 1px 1px 0px # 283744; }}} 

Sie können dem Selektor auch Pseudo-Klassen wie :hover zuweisen, indem Sie das kaufmännische Und-Zeichen (&) verwenden.

Nehmen wir an, wir möchten hinzufügen :hover zum Anchor-Tag oben, wir können es so schreiben:

 a {Farbe: #fff; Zeilenhöhe: 40px; Text-Schatten: 1px 1px 0px # 283744; &: hover {Hintergrundfarbe: # 000; Farbe: #fff; }} 

Betrieb

Wir können auch Operationen in LESS ausführen, wie Addition, Subtraktion, Multiplikation und Division von Zahlen, Farben und Variablen im Stylesheet.

Nehmen wir an, wir wollen Element B zwei Mal höher als Element A. In diesem Fall können wir es so schreiben:

 @Height: 100px .Element-A {Höhe: @Height; } .element-B {Höhe: @Höhe * 2; } 

Wie Sie oben sehen können, speichern wir zuerst den Wert in der Variable @height und weisen dann den Wert dem Element A zu.

Anstatt die Höhe selbst zu berechnen, können wir in Element B die Höhe mithilfe des Sternoperators (*) mit 2 multiplizieren . Wann immer wir den Wert in der Variable @height, wird Element B immer die doppelte Höhe haben.

Weitere Beispiele für Fortgeschrittene in unserem vorherigen Tutorial: Entwerfen einer Slick-Menü-Navigationsleiste.

Umfang

LESS wendet das Scope- Konzept an, bei dem Variablen zuerst vom lokalen Geltungsbereich vererbt werden, und wenn es lokal nicht verfügbar ist, wird ein größerer Bereich durchsucht.

 Kopfzeile {@color: schwarz; Hintergrundfarbe: @color; nav {@Farbe: blau; Hintergrundfarbe: @color; a {Farbe: @ Farbe; }}} 

Im obigen Beispiel hat die header eine schwarze Hintergrundfarbe, aber die Hintergrundfarbe des Naves ist blau, da es die Variable @color in seinem lokalen Bereich hat, während das a auch blau hat, das von seinem näheren Elternteil nav geerbt wird .

Letzter Gedanke

Letztendlich hoffen wir, dass Ihnen dieser Beitrag ein grundlegendes Verständnis dafür vermitteln kann, wie wir CSS mit LESS besser schreiben können. Du fühlst dich vielleicht anfangs etwas unbeholfen, aber wenn du es öfter probierst, wird es sicherlich viel einfacher werden.

Hier sind ein paar Tutorials, zu denen ich euch ermutige, nach weiteren Tipps und Praktiken zu suchen, die helfen können, eure LESS-Skills auf das nächste Level zu bringen.

• LESS CSS Tutorial: Entwerfen einer Slick Menü Navigationsleiste
• Verstehen weniger Farbfunktionen
• 3 neue LESS CSS Features, die Sie kennen sollten