Primii pași cu Less.js

Dezvoltarea aplicațiilor web ne duce pe multe căi, dar toate aceste căi au un lucru în comun: codul HTML și cod CSS, ceea ce ne oferă multe posibilități de a face aplicațiile noastre să arate așa cum dorim sau cum ne imaginăm.
Ceea ce se întâmplă acum este că, deoarece fiecare persoană are modul său de dezvoltare, de multe ori codurile rezultate sunt foarte extinse sau oarecum dezordonate, acest lucru face ca întreținerea și performanța să fie afectate puțin. Aici intervin bibliotecile și pre-procesoarele care ne ajută să scriem un cod puțin mai curat și mai eficient, ajutând astfel și munca în echipă, deoarece multe dintre aceste biblioteci ne fac să scriem un cod mai bun.
Less.jsNume Less.js este originar din combinarea cuvintelor CSS Leaner, ceva asemănător cu CSS mai subțire sau redusă, ceea ce ne oferă deja o idee despre ce va face acest pre-procesor, care nu este altceva decât să ne ajute să scriem mai puțin cod CSS, îmbunătățind astfel lizibilitatea și performanța aplicațiilor și a paginilor noastre web. Se bazeaza pe JavaScript deci îl putem folosi fie din partea clientului, deși această practică nu este recomandată pentru producție, fie din partea serverului datorită npm și Node.js, deci poate deveni pluginul unora Cadrul JavaScript că conducem în acest moment.
Ideea principală de adoptat Less.js în mediul nostru de dezvoltare, este de a ajuta la îndeplinirea principiului USCAT, ceea ce înseamnă să nu ne repetăm ​​și să realizăm acest lucru Less.js încorporează funcții, clase și variabile care ne permit să scriem cod mult mai reutilizabil decât ceea ce am scrie CSS direct.
1- Avem nevoie de un browser modern care să poată interpreta exemplele cu care ne vom ocupa, poate fi Google Chrome sau Firefox Developer Edition.
2- Trebuie să avem un editor de text în stil de Sublime Text sau NotePad ++ pentru a putea scrie exemplele noastre mai confortabil.
3- În cele din urmă, avem nevoie de permisiuni pentru a instala elemente prin consola de comandă și o conexiune la Internet pentru a descărca resursele necesare.
InstalareInstalarea de Less.js Se poate face în două moduri, primul direct la nivel de client și al doilea într-un mediu server, cum ar fi Node.jsSă vedem fiecare dintre aceste moduri mai jos.
Această formă de instalare este la fel de ușoară ca simpla apelare a fișierului care conține biblioteca Less.js, și pur și simplu este deja inclus în mediul nostru. Pentru a descărca biblioteca, trebuie doar să accesați lesscss.org și să descărcați cea mai recentă versiune stabilă.

MARI

Odată ce avem fișierul descărcat, putem continua să facem un mic exemplu care ne va ajuta să știm dacă avem mediul nostru gata să se dezvolte cu Less.js, de aceea trebuie să parcurgem următorii pași:
1- Vom crea un folder și în interior vom crea un fișier numit index.html, atunci vom găsi fișierul less.min.js în interiorul dosarului dist a versiunii de Less.js pe care l-am descărcat, în plus, vom crea un fișier numit stiluri.mai puțin, structura a ceea ce am descris ar trebui să arate ca ceea ce vedem mai jos:

2- Apoi vom scrie următorul cod mai jos în interiorul nostru index.html astfel încât să avem ceva ce putem aplica CSS și așa verificați stilurile:

 Primii pași cu Less.js Antetul nostru Conținutul Footer-ul nostru

Aici vedem în primul rând o structură HTML de bază, unde în cadrul corp am plasat o etichetă antet, o eticheta secțiune și în cele din urmă o etichetă subsol, aceasta ne oferă trei elemente total diferite cărora le putem aplica stiluri CSS.
3- Acum în interiorul etichetei cap din codul anterior vom încorpora fișierul nostru stiluri.după iar după această includere fișierul mai puțin.js, în acest moment este foarte important să subliniem acest lucru mai puțin.js va fi inclus întotdeauna după fișierele noastre .Mai puțin pe care le vor purta stilurile și este de asemenea important să rețineți că fișierele .Mai puțin pe care îl includem trebuie să aibă atributul rel după cum urmează: rel = "foaie de stil / mai puțin" deoarece fără aceasta compilatorul Mai puțin nu vor ști că trebuie să lucreze cu acel fișier. Să vedem cum va arăta eticheta noastră de cap cu codul suplimentar de adăugat la codul de la pasul anterior:

 Primii pași cu Less.js 

4- Acum trebuie doar să adăugăm câteva stiluri CSS în interiorul fișierului stiluri.mai puțin, codul de mai jos ce va face este să diferențiem diferitele etichete pe care le creăm cu diferite culori:

 antet {culoare: albastru;} secțiune {culoare: gri;} subsol {culoare: galben;}

5- Dacă ne deschidem index.html cu un browser vom vedea cum s-a schimbat stilul și, dacă deschidem o consolă pentru dezvoltatori, vom vedea mesajele pe care le imprimă mai puțin.js Pentru a ne anunța că funcționează, să vedem în imaginea următoare cum arată:

Putem chiar să facem un exercițiu mai aprofundat și putem deschide codul sursă al exemplului nostru în browser și să vedem cum mai puțin.js a generat un cod CSS în documentul nostru că nu includem:

Pe partea de serverInstalarea din partea clientului este foarte utilă atunci când ne dezvoltăm, deoarece ne permite să facem un fel de depanare în timp real, observând astfel schimbările din moment, cu toate acestea pentru un mediu de producție nu este deloc recomandat, în primul rând pierdem timpul în timp ce Less.js generează foile de stil și, în al doilea rând, pentru că ne încărcăm fișierele .Mai puțin care poate fi copiat de alte persoane. De aceea acum vom vedea cum să lucrăm Less.js la instalarea compilatorului, pentru aceasta vom folosi managerul de pachete npm.
Trebuie să avem o instanță de funcțional npm, de aceea vă recomandăm să instalați cea mai recentă versiune de Node.js pentru sistemul nostru de operare.
De asemenea, avem nevoie de permisiuni suficiente pentru a putea instala pachete cu npm, și pentru a executa instrucțiuni la nivelul consolei de comandă, acest lucru este foarte important mai ales în medii Linux Da Mac, astfel încât în Windows permisele sunt mai ușor de procesat la acest nivel.
1- De la o consolă de comandă trebuie să executăm următoarea instrucțiune cu npm:

 npm instalați -g mai puțin

2- Pasul anterior ne-a făcut să instalăm compilatorul Less.js, numit lessc, ceea ce face este că transformă codul nostru Mai puțin într-un cod CSS valid pentru utilizare într-un browser, așa că o vom testa, pentru aceasta vom crea un fișier numit exemplu.după cu următorul cod în interior:

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

3- Odată ce cele de mai sus sunt făcute, mergem la consola noastră și executăm următoarea instrucțiune pentru a genera un fișier .css unde se va odihni codul nostru compilat:

 lessc example.less> example.css

În fișierul rezultat vom obține ceea ce vedem în următoarea imagine:

Dacă vrem un rezultat comprimat sau minificat doar adăugați -x parametru după ce a sunat lessc ca următoarele:

 lessc -x example.less> example.css

Ceea ce ne oferă următoarele css minificat ca rezultat:

În ultimul exemplu de instalații în funcție de modul de utilizare am văzut că pentru a plasa culoarea pe o etichetă simplă p facem mai multe lucruri, în primul rând definim o variabilă de culoare cu @ modificator, acest lucru înseamnă că putem apela culori sau valori în variabile în întregul document, astfel încât să putem avea o variabilă @colorTitle și cu aceasta știm că oriunde dorim să folosim culoarea titlului, facem doar acel apel.
Rutine reutilizabileUn alt lucru pe care l-am văzut a fost că am creat o funcție numită .a scoate in evidenta () iar în interior așezăm un atribut CSS iar valoarea sa a fost variabila noastră, acesta este un alt exemplu al modului în care putem construi rutine reutilizabile în stilurile noastre, așa că, în orice clasă sau atribut pe care dorim să-l evidențiem, trebuie doar să numim acea funcție așa cum am făcut în interiorul elementului p din exemplu.
Astfel vedem că importanța Less.js este că ne ajută să ne gândim mai mult la cum să facem mai puțin și, astfel, să rezultăm cu un cod comprimat, valid și ușor de citit la final, în exemplu s-ar fi putut spune că s-a scris mult pentru atât de puțin CSS rezultând, dar ideea este că atunci când trebuie să facem o mulțime de CSS, scriem mai puțin, așa că vedem asta Less.js se dovedește când realizăm foi de stil mari.
Cu aceasta terminăm acest tutorial, am învățat să facem primii pași cu Less.js, așa că acum avem instrumente bune pentru a putea crea aplicații sau pagini web excelente folosind cea mai mică cantitate de cod posibil.