Första stegen med Less.js

Webbapplikationsutveckling tar oss ner på många vägar, men alla dessa vägar har en sak gemensamt: kod HTML och kod CSS, vilket ger oss många möjligheter att få våra applikationer att se ut som vi vill eller som vi föreställer oss.
Det som händer nu är att eftersom varje person har sitt sätt att utvecklas, är de resulterande koderna många gånger mycket omfattande eller något röriga, vilket gör att underhåll och prestanda påverkas lite. Det är här biblioteken och förprocessorerna kommer in som hjälper oss att skriva en lite renare och mer effektiv kod, vilket också hjälper teamarbete, eftersom många av dessa bibliotek får oss att skriva bättre kod.
Less.jsnamn Less.js har sitt ursprung i kombinationen av orden CSS Leaner, något liknande CSS tunnare eller reducerad, vilket redan ger oss en uppfattning om vad denna förprocessor ska göra, vilket inte är annat än att hjälpa oss att skriva mindre CSS-kod, vilket förbättrar läsbarheten och prestandan för våra applikationer och webbsidor. Det baseras på JavaScript så vi kan använda den antingen på klientsidan, även om denna praxis inte rekommenderas för produktion, eller även från serversidan tack vare npm och Node.js, så det kan bli plugin för vissa JavaScript -ramverk som vi kör för tillfället.
Huvudidén att anta Less.js i vår utvecklingsmiljö, är att hjälpa till att uppfylla principen TORR, vilket innebär att vi inte upprepar oss själva, och för att uppnå detta Less.js innehåller funktioner, klasser och variabler som gör det möjligt för oss att skriva mycket mer återanvändbar kod än vad vi skulle skriva i CSS direkt.
1- Vi behöver en modern webbläsare som kan tolka exemplen som vi kommer att hantera, det kan det vara Google Chrome eller Firefox Developer Edition.
2- Vi måste ha en textredigerare i stilen av Sublime Text eller NotePad ++ för att kunna skriva våra exempel mer bekvämt.
3- Slutligen behöver vi behörigheter för att installera element via kommandokonsolen och en internetanslutning för att ladda ner nödvändiga resurser.
InstallationInstallationen av Less.js Det kan göras på två sätt, det första direkt på klientnivå och det andra i en servermiljö som t.ex. Node.jsLåt oss se var och en av dessa sätt nedan.
Denna installationsform är lika enkel som att bara ringa filen som innehåller biblioteket Less.js, och det är helt enkelt redan inkluderat i vår miljö. För att ladda ner biblioteket måste vi bara gå till lesscss.org och ladda ner den senaste stabila versionen.

FÖRSTORA

När vi har den nedladdade filen kan vi fortsätta med ett litet exempel som hjälper oss att veta om vi har vår miljö redo att utvecklas med Less.js, det är därför vi måste utföra följande steg:
1- Vi ska skapa en mapp och inuti skapa en fil som heter index.html, då hittar vi filen less.min.js i mappen dist av versionen av Less.js som vi har laddat ner, dessutom kommer vi att skapa en fil som heter stilar. utan, strukturen för det vi har beskrivit ska se ut som det vi ser nedan:

2- Då ska vi skriva följande kod nedan inne i vår index.html så att vi har något vi kan tillämpa CSS och så kolla stilarna:

 Första steget med Less.js Vårt sidhuvud Innehållet Vår sidfot

Här ser vi först och främst en struktur HTML grundläggande, där inom kropp vi har placerat en etikett rubrik, en etikett sektion och slutligen en etikett sidfot, detta ger oss tre helt olika element som vi kan tillämpa stilar på CSS.
3- Nu inuti etiketten huvud från den tidigare koden kommer vi att införliva vår fil stilar. utan och efter detta införande av filen less.js, vid denna tidpunkt är det mycket viktigt att betona det less.js det kommer alltid att inkluderas efter våra filer .mindre som stilarna kommer att bära, och det är också viktigt att notera att filerna .mindre som vi inkluderar måste ha attributet rel som följer: rel = "stylesheet / less" eftersom utan detta kompilatorn mindre de kommer inte att veta att de måste arbeta med den filen. Låt oss se hur vår huvudtagg kommer att se ut med den extra koden som ska läggas till i koden från föregående steg:

 Första stegen med Less.js 

4- Nu måste vi bara lägga till några stilar CSS inuti filen stilar. utan, koden nedan vad som kommer att göra är att skilja de olika etiketterna som vi skapar med olika färger:

 sidhuvud {färg: blå;} avsnitt {färg: grå;} sidfot {färg: gul;}

5- Om vi ​​öppnar vår index.html med en webbläsare kommer vi att se hur stilen har förändrats, och om vi öppnar en utvecklarkonsol ser vi meddelandena som den skriver ut less.js För att låta oss veta att det fungerar, låt oss se i följande bild hur det ser ut:

Vi kan till och med göra en lite mer djupgående övning och vi kan öppna källkoden för vårt exempel i webbläsaren och se hur less.js skapat en kod CSS i vårt dokument att vi inte inkluderar:

På serversidanInstallationen på klientsidan är mycket användbar när vi utvecklar, eftersom den tillåter oss att göra en sorts felsöka i realtid och därmed observera förändringarna i ögonblicket, men för en produktionsmiljö rekommenderas det inte alls, för det första slösar vi tid medan Less.js genererar formatmallarna, och för det andra eftersom vi laddar upp våra filer .mindre som kan kopieras av andra människor. Det är därför som vi nu ska se hur vi arbetar med Less.js när du installerar din kompilator använder vi pakethanteraren för detta npm.
Vi måste ha en instans av funktionell npm, det är därför vi rekommenderar att du installerar den senaste versionen av Node.js för vårt operativsystem.
Vi behöver också tillräckliga behörigheter för att kunna installera paket med npm, och för att utföra instruktioner på kommandokonsolnivå, är detta mycket viktigt, särskilt i miljöer Linux Y Mac, så att i Windows tillstånd är lättare att behandla på denna nivå.
1- Från en kommandokonsol måste vi utföra följande instruktion med npm:

 npm installera -g mindre

2- Det föregående steget fick oss att installera kompilatorn Less.js, ringde mindrec, det här gör det att det omvandlar vår kod mindre i giltig CSS -kod för användning i en webbläsare, så vi ska testa den, för detta skapar vi en fil som heter exempel. utan med följande kod inuti:

 @färg: blå; .highlight () {color: @color;} p {.highlight ();}

3- När ovanstående är gjort går vi till vår konsol och kör följande instruktion för att skapa en fil .css där vår kompilerade kod kommer att vila:

 lessc exempel.lös> exempel.css

I vår resulterande fil kommer vi att få det vi ser i följande bild:

Om vi ​​vill ha ett komprimerat resultat eller minifierad lägg bara till -x parameter efter att ha ringt mindrec som följande:

 lessc -x exempel.lös> exempel.css

Vad ger oss följande minifierad css som ett resultat:

I det sista exemplet på installationerna enligt sättet att använda såg vi det för att placera färgen på en enkel etikett sid vi gör flera saker, först definierar vi en färgvariabel med @ modifier, det betyder att vi kan kalla färger eller värden inom variabler i hela vårt dokument, så att vi kan ha en variabel @colorTitle och med detta vet vi att var som helst vi vill använda titelfärgen gör vi bara det samtalet.
Återanvändbara rutinerEn annan sak vi såg var att vi skapade en funktion som heter .highlight () och inuti placerar vi ett attribut CSS och dess värde var vår variabel, detta är ett annat exempel på hur vi kan bygga återanvändbara rutiner inom våra stilar, så i alla klasser eller attribut som vi vill markera något måste vi bara kalla den funktionen som vi gjorde inuti p -elementet i exempel.
Således ser vi att vikten av Less.js är att det hjälper oss att tänka mer på hur man gör mindre, och därmed resultera med en komprimerad, giltig och lättläst kod i slutet, i exemplet hade man kunnat säga att mycket skrevs för så lite CSS resulterar, men tanken är att när vi måste göra mycket CSS skriver vi mindre, så vi ser det Less.js det visar sig när vi gör stora formatmallar.
Med detta avslutar vi denna handledning, vi har lärt oss att ta våra första steg med Less.js, så nu har vi bra verktyg för att kunna bygga bra applikationer eller webbsidor med minsta möjliga mängd kod.