WENIGER CSS - Anfängerhandbuch

Der CSS-Pre-Prozessor ist mittlerweile ein fester Bestandteil der Webentwicklung. Es enthält einfaches CSS mit Programmiermerkmalen wie Variablen, Funktionen oder Mixin und Operation, mit denen Webentwickler erstellen können modulare, skalierbare und überschaubarere CSS-Stile.

In diesem Beitrag werden wir uns mit LESS beschäftigen, einem der populärsten CSS-Pre-Prozessoren, der in zahlreichen Front-End-Frameworks wie Bootstrap weit verbreitet ist. Wir gehen auch durch die grundlegende Hilfsprogramme, Tools und Setups, die Ihnen helfen, LESS in Betrieb zu nehmen.

Der Compiler

Zunächst müssen wir einen Compiler einrichten. Die WENIGER-Syntax ist nicht standardgemäß gemäß der W3C-Spezifikation. Der Browser ist nicht in der Lage, die Ausgabe zu verarbeiten und zu rendern, obwohl ähnliche Merkmale wie CSS geerbt wurden.

Hier ein kurzer Blick auf LESS-Code:

 @ Farbbasis: # 2d5e8b; .class1 Hintergrundfarbe: @ Farbbasis; .class2 Hintergrundfarbe: #fff; Farbe: @ Farbbasis;

Der Compiler verarbeitet den Code und wandelt die LESS-Syntax in ein Browser-kompatibles CSS-Format um:

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

Es gibt eine Reihe von Tools zum Kompilieren von CSS:

Verwendung von JavaScript

WENIGER kommt mit einem less.js Datei, die wirklich einfach auf Ihrer Website bereitgestellt werden kann. Erstellen Sie ein Stylesheet mit .Weniger Erweiterung und verknüpfen Sie es in Ihrem Dokument mit der rel = "Stylesheet / weniger" Attribut.

Sie können die JS-Datei hier herunterladen, über den Bower-Paketmanager herunterladen oder direkt mit CDN verknüpfen, z.

Sie sind alle festgelegt und können Stile innerhalb des erstellen .Weniger. Die LESS-Syntax wird während des Ladens der Seite schnell kompiliert. Denk daran, dass Von der Verwendung von JavaScript wird in der Produktionsphase abgeraten, da dies die Leistung der Website beeinträchtigen wird.

Sie sollten die LESS-Syntax immer vorher und nur kompilieren Regelmäßiges CSS stattdessen. Sie können verwenden Terminal, ein Task Runner mag Grunzen oder Schluck, oder eine grafische Anwendung dazu.

CLI verwenden

LESS bietet eine native Befehlszeilenschnittstelle (CLI), lessc, Das erledigt mehrere Aufgaben, die über die LESS-Syntax hinausgehen. Mit der CLI können wir die Codes fassen, die Dateien komprimieren und eine Quellkarte erstellen. Der Befehl basiert auf Node.js, sodass der Befehl unter Windows, OS X und Linux effektiv funktioniert.

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

 npm install -g less

Jetzt hast du die lessc Befehl zur Verfügung, um LESS in CSS zu übersetzen:

 lessc style.less style.css

Task Runner verwenden

Task Runner ist ein Werkzeug, das Entwicklungsaufgaben und Arbeitsabläufe automatisiert. Anstatt das auszuführen lessc Wenn Sie unsere Codes jedes Mal kompilieren möchten, können Sie einen Task-Runner einrichten und ihn so einstellen, dass er die Änderungen in unseren LESS-Dateien überwacht und LESS sofort in CSS kompiliert.

Zwei beliebte Werkzeuge in dieser Kategorie sind heute Grunt und Gulp. Wir haben eine Reihe von Beiträgen, die diese Tools behandeln. In den Beiträgen erfahren Sie, wie Sie diese Tools in Ihrem Workflow bereitstellen.

So verwenden Sie Grunt zur Automatisierung Ihres Workflows
Erste Schritte mit Gulp.js
Die Schlacht um Build-Skripte: Gulp Vs Grunt

Grafische Anwendung verwenden

Für diejenigen, die nicht daran gewöhnt sind, Terminal- und Befehlszeilen zu verwenden, können sie stattdessen eine grafische Benutzeroberfläche wählen. Es gibt eine Fülle von Anwendungen, um LESS heute für alle Plattformen zu erstellen - einige kostenlos, andere bezahlt

Hier ist die vollständige Liste:

App	Plattform	Kosten
Mischung	OS X / Windows	Kostenlos
Koala	OS X / Windows / Linux	Kostenlos
Prepros	OS X / Windows	Freemium (USD29)
WinLESS	Windows	Kostenlos
CodeKit	OS X	USD32

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

Der Code-Editor

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

Nachdem wir nun den Compiler und den Code-Editor eingestellt haben, können wir CSS-Stile mit der LESS-Syntax schreiben.

WENIGER Syntax

Im Gegensatz zu regulärem CSS, wie wir es kennen, arbeitet LESS eher wie eine Programmiersprache. Es ist dynamisch, erwarten Sie also einige Terminologien wie Variablen, Operation und Umfang nach dem Weg.

Variablen

Schauen wir uns zuerst das an Variablen.

Wenn Sie schon lange mit CSS gearbeitet haben, haben Sie wahrscheinlich so etwas geschrieben, bei dem in Deklarationsblöcken im gesamten Stylesheet wiederholte Werte zugewiesen wurden.

 .class1 Hintergrundfarbe: # 2d5e8b;  .class2 Hintergrundfarbe: #fff; Farbe: # 2d5e8b;  .class3 border: 1px fest # 2d5e8b;

Diese Praxis ist eigentlich in Ordnung - bis wir uns mehr als durchschauen müssen tausend oder mehr ähnliche Ausschnitte im gesamten Stylesheet. Dies kann beim Erstellen einer umfangreichen Website passieren. Die Arbeit wird langweilig.

Wenn wir einen CSS-Präprozessor wie LESS verwenden, wäre die obige Instanz kein Problem - wir können sie verwenden Variablen. Die Variablen erlauben uns zu speichern eine Konstante Wert, der später im gesamten Stylesheet wiederverwendet werden kann.

 @ Farbbasis: # 2d5e8b; .class1 Hintergrundfarbe: @ Farbbasis;  .class2 Hintergrundfarbe: #fff; Farbe: @ Farbbasis;  .class3 border: 1px festes @ color-base;

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

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

 @ font-family: Georgia @ dot-border: gepunkteter @ Übergang: linear @opacity: 0.5

Mixins

In WENIGER können wir verwenden Mixins ganze Deklarationen in einem CSS-Regelsatz in einem anderen Regelsatz wiederverwenden. Hier ist ein Beispiel:

 .Farbverläufe Hintergrund: #Aeaea; Hintergrund: linearer Gradient (oben, #eaea, #cccccc); Hintergrund: -o-linearer Gradient (oben, #eaeaea, #cccccc); Hintergrund: -ms-linearer Gradient (oben, #eaeaea, #cccccc); Hintergrund: -moz-linearer Gradient (oben, #eaeaea, #cccccc); Hintergrund: -webkit-linearer Gradient (oben, #eaeaea, #cccccc);

Im obigen Snippet haben wir eine Voreinstellung festgelegt Gradient Farbe im Inneren .Farbverläufe Klasse. Wann immer wir die Farbverläufe hinzufügen wollen, fügen wir einfach die .Farbverläufe diesen Weg:

 div .gradients; Grenze: 1px fest # 555; Grenzradius: 3px;

Das .Box erbt den gesamten Deklarationsblock im .Farbverläufe. Die obige CSS-Regel entspricht also dem folgenden einfachen CSS:

 div background: #eaeaea; Hintergrund: linearer Gradient (oben, #eaea, #cccccc); Hintergrund: -o-linearer Gradient (oben, #eaeaea, #cccccc); Hintergrund: -ms-linearer Gradient (oben, #eaeaea, #cccccc); Hintergrund: -moz-linearer Gradient (oben, #eaeaea, #cccccc); Hintergrund: -webkit-linearer Gradient (oben, #eaeaea, #cccccc); Grenze: 1px fest # 555; Grenzradius: 3px;

Wenn Sie häufig CSS3 auf Ihrer Website verwenden, können Sie LESS Elements verwenden, um Ihre Arbeit zu vereinfachen. WENIGER Elemente ist eine Sammlung von Gemeinsamkeiten CSS3 Mixins dass wir oft in Stylesheets wie Grenzradius, Farbverläufe, Schlagschatten und so weiter.

Um weniger Elemente zu verwenden, fügen Sie einfach das hinzu @einführen Regel in Ihrem LESS Stylesheet. Vergessen Sie jedoch nicht, es zuerst herunterzuladen und in Ihr Arbeitsverzeichnis aufzunehmen.

 @import "elements.less";

Wir können jetzt alles wiederverwenden Klassen bereitgestellt von der Elemente, zum Beispiel hinzufügen 3px Grenzradius zu a div, wir können schreiben:

 div .rund (3px);

Weitere Informationen finden Sie in der offiziellen Dokumentation.

Verschachtelte Regeln

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

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

In einfachen CSS-Elementen wählen wir untergeordnete Elemente aus, indem wir in jedem Regelsatz zuerst auf das übergeordnete Element abzielen, was bei der Befolgung des Befehls erheblich überflüssig ist “Best Practices” Prinzip.

In LESS CSS können wir die Regelsätze durch vereinfachen Verschachteln der Kindelemente in den Eltern, wie folgt;

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

Sie können auch zuweisen Pseudoklassen, mögen :schweben, mit dem kaufmännischem Und-Zeichen (&).

Nehmen wir an, wir wollen hinzufügen :schweben Zum Anker-Tag oben können wir es so schreiben:

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

Operation

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

Nehmen wir an, Element B soll zweimal höher sein als Element A. In diesem Fall können wir es so schreiben:

 @ Höhe: 100px .element-A Höhe: @ Höhe;  .element-B height: @height * 2;

Wie Sie oben sehen können, speichern wir den Wert zuerst im @Höhe Variable, und weisen Sie den Wert dann Element A zu.

In Element B sollten Sie die Höhe nicht selbst berechnen, Wir können die Höhe mit 2 multiplizieren mit dem Sternchen-Operator (*). Nun, wann immer wir den Wert in ändern @Höhe Variable, Element B wird immer die doppelte Höhe haben.

In unserem vorherigen Lernprogramm finden Sie ausführlichere Operationsbeispiele: Entwerfen einer Slick-Menü-Navigationsleiste.

Umfang

WENIGER gilt das Umfang Konzept, bei dem Variablen zuerst vom lokalen Bereich geerbt werden und wenn sie nicht lokal verfügbar sind, wird ein größerer Bereich durchsucht.

 Kopfzeile @farbe: schwarz; Hintergrundfarbe: @color; nav @color: blau; Hintergrundfarbe: @color; eine color: @color;

Im obigen Beispiel wird der Header hat ein schwarz Hintergrundfarbe, aber navHintergrundfarbe wird sein Blau da es die @color-Variable in ihrem lokalen Bereich hat, während die ein wird auch Blau haben, das von seinem näheren Elternteil geerbt wird, nav.

Letzter Gedanke

Letztendlich hoffen wir, dass Ihnen dieser Beitrag ein grundlegendes Verständnis darüber vermittelt, wie wir mit LESS CSS besser schreiben können. Vielleicht fühlen Sie sich auf den ersten Blick etwas unbeholfen, aber wenn Sie es öfter versuchen, wird es sicherlich viel einfacher.

Hier sind ein paar Tutorials, an denen ich Sie ermutigen sollte, nach weiteren Tipps und Praktiken zu suchen, die dazu beitragen können, Ihre LESS-Fähigkeit auf den nächsten Level zu bringen.

WENIGER CSS-Tutorial: Eine Slick-Menü-Navigationsleiste entwerfen
Grundlegendes zu weniger Farbfunktionen
3 Neue WENIGER CSS-Funktionen, die Sie kennen sollten