Erste Schritte mit Less.js

Die Entwicklung von Webanwendungen führt uns viele Wege, aber alle diese Wege haben eines gemeinsam: Code HTML und Code CSS, wodurch wir viele Möglichkeiten haben, unsere Anwendungen so aussehen zu lassen, wie wir es wollen oder wie wir uns das vorstellen.
Was jetzt passiert, ist, dass die resultierenden Codes oft sehr umfangreich oder etwas unordentlich sind, da jede Person ihre eigene Art der Entwicklung hat, was dazu führt, dass Wartung und Leistung ein wenig beeinträchtigt werden. Hier kommen die Bibliotheken und Präprozessoren ins Spiel, die uns helfen, einen etwas saubereren und effizienteren Code zu schreiben, was auch die Teamarbeit unterstützt, da viele dieser Bibliotheken uns dazu bringen, besseren Code zu schreiben.
Weniger.jsName Weniger.js entsteht aus der Kombination der Wörter CSS-Leaner, so etwas wie CSS dünner oder reduzierter, was uns bereits eine Vorstellung davon gibt, was dieser Präprozessor tun wird, was nichts anderes ist, als uns zu helfen, weniger CSS-Code zu schreiben und so die Lesbarkeit und Leistung unserer Anwendungen und Webseiten zu verbessern. Es basiert auf JavaScript Wir können es also entweder auf der Client-Seite verwenden, obwohl diese Praxis für die Produktion nicht empfohlen wird, oder auch auf der Server-Seite dank npm und Node.js, so dass es das Plugin von einigen werden kann JavaScript-Framework die wir gerade fahren.
Die Hauptidee zu adoptieren Weniger.js in unserer Entwicklungsumgebung, soll dazu beitragen, das Prinzip zu erfüllen TROCKEN, was bedeutet, uns nicht zu wiederholen, und dies zu erreichen Weniger.js enthält Funktionen, Klassen und Variablen, die es uns ermöglichen, viel mehr wiederverwendbaren Code zu schreiben, als wir hineinschreiben würden CSS direkt.
1- Wir brauchen einen modernen Browser, der die Beispiele, mit denen wir uns befassen werden, interpretieren kann, das kann sein Google Chrome oder Firefox-Entwickler-Edition.
2- Wir müssen einen Texteditor im Stil haben von Sublime Text oder NotePad ++, um unsere Beispiele bequemer schreiben zu können.
3- Schließlich benötigen wir Berechtigungen zum Installieren von Elementen über die Befehlskonsole und eine Internetverbindung, um die erforderlichen Ressourcen herunterzuladen.
InstallationDie Installation von Weniger.js Dies kann auf zwei Arten erfolgen, die erste direkt auf Client-Ebene und die zweite in einer Serverumgebung wie z Node.jsSehen wir uns jede dieser Möglichkeiten unten an.
Diese Form der Installation ist so einfach wie der Aufruf der Datei, die die Bibliothek enthält Weniger.js, und es ist einfach schon in unserer Umwelt enthalten. Um die Bibliothek herunterzuladen, müssen wir nur zu lesscss.org gehen und die neueste stabile Version herunterladen.

VERGRÖSSERN

Sobald wir die heruntergeladene Datei haben, können wir ein kleines Beispiel erstellen, das uns hilft zu wissen, ob wir unsere Umgebung für die Entwicklung bereit haben Weniger.js, deshalb müssen wir die folgenden Schritte durchführen:
1- Wir werden einen Ordner erstellen und darin eine Datei namens . erstellen index.html, dann finden wir die Datei weniger.min.js im Ordner dist der Version von Weniger.js die wir heruntergeladen haben, erstellen wir zusätzlich eine Datei namens stile.weniger, sollte die Struktur von dem, was wir beschrieben haben, so aussehen, wie wir es unten sehen:

2- Dann werden wir den folgenden Code unten in unser schreiben index.html damit wir etwas haben, das wir anwenden können CSS und so überprüfen Sie die Stile:

 Erste Schritte mit Less.js Unser Header Der Inhalt Unser Footer

Hier sehen wir zunächst eine Struktur HTML basic, wo innerhalb der Karosserie Wir haben ein Etikett platziert Header, ein Etikett Sektion und zum Schluss ein Etikett Fusszeile, das gibt uns drei völlig unterschiedliche Elemente, auf die wir Stile anwenden können CSS.
3- Jetzt im Etikett Kopf aus dem vorherigen Code werden wir unsere Datei einbinden stile.weniger und nach dieser Aufnahme die Datei weniger.js, an dieser Stelle ist es sehr wichtig zu betonen, dass weniger.js es wird immer nach unseren Dateien enthalten sein .weniger die die Stile tragen werden, und es ist auch wichtig zu beachten, dass die Dateien .weniger die wir einschließen müssen das Attribut haben rel wie folgt: rel = "Stylesheet / weniger" da ohne diesen der Compiler weniger sie werden nicht wissen, dass sie mit dieser Datei arbeiten müssen. Sehen wir uns an, wie unser Head-Tag mit dem zusätzlichen Code aussieht, der dem Code aus dem vorherigen Schritt hinzugefügt wird:

 Erste Schritte mit Less.js 

4- Jetzt müssen wir nur noch einige Stile hinzufügen CSS in der Datei stile.weniger, der folgende Code unterscheidet die verschiedenen Etiketten, die wir mit verschiedenen Farben erstellen:

 Kopfzeile {Farbe: Blau;} Abschnitt {Farbe: Grau;} Fußzeile {Farbe: Gelb;}

5- Wenn wir unsere öffnen index.html Mit einem Browser sehen wir, wie sich der Stil geändert hat, und wenn wir eine Entwicklerkonsole öffnen, sehen wir die Nachrichten, die sie ausdrucken weniger.js Um uns mitzuteilen, dass es funktioniert, sehen wir uns im folgenden Bild an, wie es aussieht:

Wir können sogar eine etwas tiefere Übung durchführen und den Quellcode unseres Beispiels im Browser öffnen und sehen, wie es geht weniger.js einen Code generiert CSS in unserem Dokument, das wir nicht aufnehmen:

Auf der ServerseiteDie Installation auf der Client-Seite ist sehr nützlich, wenn wir entwickeln, da wir damit eine Art von debuggen in Echtzeit, um die Veränderungen im Moment zu beobachten, aber für eine Produktionsumgebung ist es überhaupt nicht zu empfehlen, in erster Linie verschwenden wir Zeit damit Weniger.js generiert die Stylesheets, und zweitens, weil wir unsere Dateien hochladen .weniger die von anderen kopiert werden können. Deshalb werden wir jetzt sehen, wie man damit arbeitet Weniger.js bei der Installation Ihres Compilers verwenden wir dafür den Paketmanager npm.
Wir müssen eine Instanz von . haben funktional npm, deshalb empfehlen wir die Installation der neuesten Version von Node.js für unser Betriebssystem.
Wir benötigen auch ausreichende Berechtigungen, um Pakete mit installieren zu können npm, und um Anweisungen auf Befehlskonsolenebene auszuführen, ist dies insbesondere in Umgebungen sehr wichtig Linux Ja Mac, damit in Fenster Genehmigungen sind auf dieser Ebene einfacher zu bearbeiten.
1- Von einer Befehlskonsole müssen wir die folgende Anweisung ausführen mit npm:

 npm install -g weniger

2- Der vorherige Schritt hat uns veranlasst, den Compiler zu installieren Weniger.js, namens wenigerc, es verändert unseren Code weniger in gültigem CSS-Code für die Verwendung in einem Browser, also werden wir es testen, dafür erstellen wir eine Datei namens Beispiel.weniger mit folgendem Code drin:

 @color: blau; .highlight () {color: @color;} p {.highlight ();}

3- Sobald dies erledigt ist, gehen wir zu unserer Konsole und führen die folgende Anweisung aus, um eine Datei zu generieren .css wo unser kompilierter Code ruht:

 wenigerc beispiel.weniger> beispiel.css

In unserer resultierenden Datei erhalten wir das, was wir im folgenden Bild sehen:

Wenn wir ein komprimiertes Ergebnis wollen oder verkleinert füge einfach die hinzu -x-Parameter nach dem Anruf wenigerc wie folgt:

 lessc -x example.less> example.css

Was gibt uns folgendes verkleinertes CSS infolge:

Im letzten Beispiel der Installationen nach der Verwendungsart haben wir gesehen, dass die Farbe auf einem einfachen Etikett platziert wird P Wir machen mehrere Dinge, zuerst definieren wir eine Farbvariable mit dem @ Modifikator, das bedeutet, dass wir in unserem gesamten Dokument Farben oder Werte innerhalb von Variablen aufrufen können, sodass wir eine Variable haben können @colorTitle und damit wissen wir, dass wir überall, wo wir die Titelfarbe verwenden möchten, nur diesen Aufruf tätigen.
Wiederverwendbare RoutinenEine andere Sache, die wir gesehen haben, war, dass wir eine Funktion namens . erstellt haben .Markieren () und drinnen platzieren wir ein Attribut CSS und sein Wert war unsere Variable, dies ist ein weiteres Beispiel dafür, wie wir wiederverwendbare Routinen in unseren Stilen erstellen können. In jeder Klasse oder jedem Attribut, das wir hervorheben möchten, müssen wir diese Funktion einfach aufrufen, wie wir es innerhalb des p-Elements im getan haben Beispiel.
So sehen wir, dass die Bedeutung von Weniger.js ist, dass es uns hilft, mehr darüber nachzudenken, wie wir weniger tun können, und am Ende einen komprimierten, gültigen und leicht lesbaren Code zu erhalten, in dem Beispiel hätte man sagen können, dass für so wenig viel geschrieben wurde CSS Ergebnis, aber die Idee ist, dass wir weniger schreiben, wenn wir viel CSS machen müssen, also sehen wir das Weniger.js es stellt sich heraus, wenn wir große Stylesheets erstellen.
Damit beenden wir dieses Tutorial, wir haben gelernt, unsere ersten Schritte mit zu machen Weniger.js, also haben wir jetzt gute Tools, um großartige Anwendungen oder Webseiten mit möglichst wenig Code zu erstellen.