Eerste stappen met Less.js

De ontwikkeling van webapplicaties leidt ons langs vele paden, maar al deze paden hebben één ding gemeen: code HTML en code CSS, wat ons veel mogelijkheden geeft om onze applicaties eruit te laten zien zoals we willen of zoals we ons voorstellen.
Wat er nu gebeurt, is dat, aangezien elke persoon zijn manier van ontwikkelen heeft, de resulterende codes vaak erg uitgebreid of enigszins rommelig zijn, waardoor het onderhoud en de prestaties een beetje worden beïnvloed. Hier komen de bibliotheken en pre-processors om de hoek kijken die ons helpen een iets schonere en efficiëntere code te schrijven, wat ook helpt bij het teamwerk, aangezien veel van deze bibliotheken ons betere code laten schrijven.
Less.jsNaam Less.js is ontstaan ​​uit de combinatie van de woorden CSS slanker, zoiets als CSS dunner of verkleind, wat ons al een idee geeft van wat deze pre-processor gaat doen, wat niets meer is dan ons te helpen minder CSS-code te schrijven, waardoor de leesbaarheid en prestaties van onze applicaties en webpagina's verbeteren. Het is gebaseerd op JavaScript zodat we het ofwel aan de clientzijde kunnen gebruiken, hoewel deze praktijk niet wordt aanbevolen voor productie, of ook vanaf de serverzijde dankzij npm en Node.js, dus het kan de plug-in worden van sommigen JavaScript-framework dat we op dit moment rijden.
Het belangrijkste idee om te adopteren: Less.js in onze ontwikkelomgeving, is om te helpen voldoen aan het principe: DROOG, wat betekent dat we onszelf niet hoeven te herhalen, en om dit te bereiken Less.js bevat functies, klassen en variabelen die het voor ons mogelijk maken om veel meer herbruikbare code te schrijven dan waarin we zouden schrijven CSS direct.
1- We hebben een moderne browser nodig die de voorbeelden kan interpreteren die we zullen behandelen, het kan zijn Google Chrome of Firefox-ontwikkelaarseditie.
2- We moeten een teksteditor in de stijl hebben door sublieme tekst of NotePad ++ om onze voorbeelden comfortabeler te kunnen schrijven.
3- Ten slotte hebben we machtigingen nodig om elementen te installeren via de opdrachtconsole en een internetverbinding om de benodigde bronnen te downloaden.
InstallatieDe installatie van Less.js Het kan op twee manieren worden gedaan, de eerste direct op clientniveau en de tweede in een serveromgeving zoals: Node.jsLaten we elk van deze manieren hieronder bekijken.
Deze vorm van installatie is net zo eenvoudig als het aanroepen van het bestand dat de bibliotheek bevat Less.js, en het is gewoon al opgenomen in onze omgeving. Om de bibliotheek te downloaden, hoeven we alleen maar naar lesscss.org te gaan en de nieuwste stabiele versie te downloaden.

VERGROTEN

Zodra we het gedownloade bestand hebben, kunnen we doorgaan met het maken van een klein voorbeeld dat ons zal helpen te weten of we onze omgeving klaar hebben om mee te ontwikkelen Less.js, daarom moeten we de volgende stappen uitvoeren:
1- We gaan een map maken en binnenin een bestand maken met de naam index.html, dan zullen we het bestand vinden minder.min.js in de map dist van de versie van Less.js die we hebben gedownload, gaan we bovendien een bestand maken met de naam stijlen.less, zou de structuur van wat we hebben beschreven eruit moeten zien als wat we hieronder zien:

2- Dan gaan we de volgende code hieronder schrijven in onze index.html zodat we iets hebben dat we kunnen toepassen CSS en dus controleer de stijlen:

 Eerste stappen met Less.js Onze koptekst De inhoud Onze voettekst

Hier zien we allereerst een structuur HTML basis, waar binnen de lichaam we hebben een label geplaatst koptekst, een label sectie en tot slot een label voettekst, dit geeft ons drie totaal verschillende elementen waarop we stijlen kunnen toepassen CSS.
3- Nu in het label hoofd van de vorige code gaan we ons bestand opnemen stijlen.less en na deze opname het bestand minder.js, op dit punt is het erg belangrijk om te benadrukken dat: minder.js het zal altijd worden opgenomen na onze bestanden .minder die de stijlen zullen dragen, en het is ook belangrijk op te merken dat de bestanden .minder die we opnemen moet het attribuut hebben rel als volgt: rel = "stylesheet / minder" aangezien zonder dit de compiler minder ze zullen niet weten dat ze met dat bestand moeten werken. Laten we eens kijken hoe onze head-tag eruit zal zien met de extra code om toe te voegen aan de code uit de vorige stap:

 Eerste stappen met Less.js 

4- Nu hoeven we alleen nog wat stijlen toe te voegen CSS in het bestand stijlen.less, de onderstaande code zal de verschillende labels die we met verschillende kleuren maken, onderscheiden:

 koptekst {kleur: blauw;} sectie {kleur: grijs;} voettekst {kleur: geel;}

5- Als we onze . openen index.html met een browser zullen we zien hoe de stijl is veranderd, en als we een ontwikkelaarsconsole openen, zullen we de berichten zien die worden afgedrukt minder.js Om ons te laten weten dat het werkt, laten we in de volgende afbeelding zien hoe het eruit ziet:

We kunnen zelfs een beetje meer diepgaande oefening doen en we kunnen de broncode van ons voorbeeld in de browser openen en zien hoe minder.js een code gegenereerd CSS in ons document dat we niet opnemen:

Aan de serverkantDe installatie aan de clientzijde is erg handig wanneer we aan het ontwikkelen zijn, omdat het ons in staat stelt een soort van debuggen in realtime, dus de veranderingen in het moment observeren, maar voor een productieomgeving wordt het helemaal niet aanbevolen, in de eerste plaats verspillen we tijd terwijl Less.js genereert de stylesheets, en ten tweede omdat we onze bestanden uploaden .minder die door andere mensen kunnen worden gekopieerd. Daarom gaan we nu kijken hoe we ermee kunnen werken Less.js bij het installeren van uw compiler gebruiken we hiervoor de pakketbeheerder npm.
We moeten een instantie hebben van functionele npm, daarom raden we aan om de nieuwste versie van te installeren Node.js voor ons besturingssysteem.
We hebben ook voldoende rechten nodig om pakketten te kunnen installeren met: npm, en om instructies op het niveau van de opdrachtconsole uit te voeren, is dit erg belangrijk, vooral in omgevingen Linux Y Mac, zodat in ramen vergunningen zijn op dit niveau makkelijker te verwerken.
1- Vanaf een commandoconsole moeten we de volgende instructie uitvoeren met npm:

 npm install -g minder

2- Bij de vorige stap moesten we de compiler installeren Less.js, genaamd minder, dit wat het doet is dat het onze code transformeert minder in geldige CSS-code voor gebruik in een browser, dus we gaan het testen, hiervoor zullen we een bestand maken met de naam voorbeeld.less met de volgende code erin:

 @color: blauw; .highlight () {kleur: @color;} p {.highlight ();}

3- Zodra het bovenstaande is gedaan, gaan we naar onze console en voeren we de volgende instructie uit om een ​​bestand te genereren: .css waar onze gecompileerde code zal rusten:

 lessc voorbeeld.less> voorbeeld.css

In ons resulterende bestand zullen we verkrijgen wat we zien in de volgende afbeelding:

Als we een gecomprimeerd resultaat willen of verkleind voeg gewoon de toe -x-parameter na bellen minder zoals het volgende:

 lessc -x voorbeeld.less> voorbeeld.css

Wat geeft ons het volgende? verkleinde css als gevolg:

In het laatste voorbeeld van de installaties volgens de manier van gebruik zagen we dat om de kleur op een eenvoudig label te plaatsen P we doen verschillende dingen, eerst definiëren we een kleurvariabele met de @ modifier, dit betekent dat we kleuren of waarden binnen variabelen in ons hele document kunnen aanroepen, zodat we een variabele kunnen hebben @colorTitle en hiermee weten we dat we overal waar we de titelkleur willen gebruiken, alleen die oproep doen.
Herbruikbare routinesEen ander ding dat we zagen was dat we een functie hebben gemaakt met de naam .markeer () en binnen plaatsen we een attribuut CSS en zijn waarde was onze variabele, dit is een ander voorbeeld van hoe we herbruikbare routines kunnen bouwen binnen onze stijlen, dus in elke klasse of attribuut dat we iets willen benadrukken, moeten we die functie gewoon noemen zoals we deden in het p element in de voorbeeld.
Zo zien we dat het belang van Less.js is dat het ons helpt om meer na te denken over hoe we minder kunnen doen, en zo aan het einde een gecomprimeerde, geldige en gemakkelijk leesbare code te krijgen, in het voorbeeld zou kunnen worden gezegd dat er veel is geschreven voor zo weinig CSS resultaat, maar het idee is dat wanneer we veel CSS moeten doen, we minder schrijven, dus we zien dat Less.js dat blijkt als we grote stylesheets maken.
Hiermee sluiten we deze tutorial af, we hebben geleerd om onze eerste stappen te zetten met Less.js, dus nu hebben we goede tools om geweldige applicaties of webpagina's te bouwen met zo min mogelijk code.