Prvi koraci s Less.js

Razvoj web aplikacija vodi nas niz puta, ali svi ti putovi imaju jednu zajedničku stvar: kôd HTML i kod CSS, što nam daje mnoge mogućnosti da naše aplikacije izgledaju onako kako želimo ili kako zamišljamo.
Ono što se sada događa je da, budući da svaka osoba ima svoj način razvoja, mnogo puta su rezultirajući kodovi vrlo opsežni ili pomalo neuredni, što uzrokuje malo utjecaja na održavanje i performanse. Ovdje dolaze knjižnice i predprocesori koji nam pomažu u pisanju malo čišćeg i učinkovitijeg koda, pomažući tako i u timskom radu, budući da nas mnoge od tih knjižnica tjeraju da napišemo bolji kod.
Manje.jsIme Manje.js potječe od kombinacije riječi CSS Leaner, nešto kao CSS tanji ili smanjeni, što nam već daje ideju o tome što će ovaj predprocesor učiniti, što je ništa drugo nego pomoć u pisanju manje CSS koda, poboljšavajući tako čitljivost i performanse naših aplikacija i web stranica. Temelji se na JavaScript tako da ga možemo koristiti ili na strani klijenta, iako se ova praksa ne preporučuje za proizvodnju, niti sa strane poslužitelja zahvaljujući npm i Node.js, pa može postati dodatak za neke JavaScript okvir da se trenutno vozimo.
Glavna ideja koju treba usvojiti Manje.js u našem razvojnom okruženju, pomoći u ispunjavanju načela SUHO, što znači da se ne ponavljamo i da to postignemo Manje.js uključuje funkcije, klase i varijable koje nam omogućuju da napišemo mnogo više koda za višekratnu uporabu od onoga što bismo napisali CSS direktno.
1- Treba nam moderan preglednik koji može tumačiti primjere s kojima ćemo se baviti, može biti Google Chrome ili Firefox Developer Edition.
2- Moramo imati uređivač teksta u stilu by Sublime Text ili NotePad ++ kako biste mogli udobnije pisati naše primjere.
3- Konačno su nam potrebna dopuštenja za instaliranje elemenata putem naredbene konzole i internetske veze za preuzimanje potrebnih resursa.
MontažaInstalacija Manje.js To se može učiniti na dva načina, prvi izravno na razini klijenta, a drugi u poslužiteljskom okruženju, kao što je Node.jsPogledajmo svaki od ovih načina u nastavku.
Ovaj oblik instalacije jednostavan je kao i jednostavno pozivanje datoteke koja sadrži biblioteku Manje.js, i jednostavno je već uključeno u naše okruženje. Za preuzimanje knjižnice moramo samo otići na lesscss.org i preuzeti najnoviju stabilnu verziju.

POVEĆAJTE

Nakon što preuzmemo datoteku, možemo napraviti mali primjer koji će nam pomoći da saznamo imamo li svoje okruženje spremno za razvoj Manje.js, zato moramo poduzeti sljedeće korake:
1- Kreirat ćemo mapu, a unutra stvoriti datoteku pod nazivom index.html, tada ćemo pronaći datoteku manje.min.js unutar mape dist verzije Manje.js koju smo preuzeli, dodatno ćemo stvoriti datoteku pod nazivom stilova.nema, struktura onoga što smo opisali trebala bi izgledati ovako kako dolje vidimo:

2- Zatim ćemo ispod unijeti sljedeći kôd u naš index.html tako da imamo nešto što možemo primijeniti CSS pa provjerite stilove:

 Prvi koraci s Less.js Naš zaglavlje Sadržaj Naše podnožje

Ovdje prije svega vidimo strukturu HTML osnovne, gdje se unutar tijelo postavili smo oznaku Zaglavlje, oznaka odjeljak i na kraju oznaka podnožje, to nam daje tri potpuno različita elementa na koja možemo primijeniti stilove CSS.
3- Sad unutar etikete glava iz prethodnog koda ćemo ugraditi našu datoteku stilova.nema a nakon ovog uključivanja datoteka manje.js, u ovom je trenutku vrlo važno to naglasiti manje.js uvijek će biti uključeno nakon naših datoteka .manje koje će stilovi nositi, a također je važno napomenuti da datoteke .manje koje uključujemo mora imati atribut rel kako slijedi: rel = "stilska tablica / manje" budući da bez ovoga prevoditelj manje neće znati da moraju raditi s tom datotekom. Pogledajmo kako će izgledati naša oznaka head s dodatnim kodom za dodavanje kodu iz prethodnog koraka:

 Prvi koraci s Less.js 

4- Sada samo moramo dodati neke stilove CSS unutar datoteke stilova.nema, kôd ispod dolje će razlikovati različite oznake koje stvaramo različitim bojama:

 zaglavlje {boja: plavo;} odjeljak {boja: sivo;} podnožje {boja: žuto;}

5- Ako otvorimo svoje index.html s preglednikom ćemo vidjeti kako se stil promijenio, a ako otvorimo konzolu za razvojne programere vidjet ćemo poruke koje ispisuje manje.js Da biste nas obavijestili da radi, pogledajmo na sljedećoj slici kako izgleda:

Možemo čak i napraviti dublju vježbu, a možemo otvoriti izvorni kod našeg primjera u pregledniku i vidjeti kako manje.js generirao kôd CSS u naš dokument koji ne uključujemo:

Na strani poslužiteljaInstalacija na strani klijenta vrlo je korisna kada razvijamo, jer nam omogućuje da napravimo neku vrstu otklanjanje pogrešaka u stvarnom vremenu, promatrajući tako trenutne promjene, međutim za proizvodno okruženje to se uopće ne preporučuje, prije svega gubimo vrijeme dok Manje.js generira stilske tablice, a drugo zato što učitavamo svoje datoteke .manje koje mogu kopirati drugi ljudi. Zato ćemo sada vidjeti kako raditi Manje.js prilikom instaliranja vašeg prevoditelja, za to ćemo koristiti upravitelja paketa npm.
Moramo imati primjer funkcionalni npm, zato preporučujemo instaliranje najnovije verzije Node.js za naš operativni sustav.
Također nam trebaju dovoljna dopuštenja za instaliranje paketa npm, a za izvršavanje uputa na razini naredbene konzole to je vrlo važno osobito u okruženjima Linux Y Mac, tako da u Windows dozvole je lakše obraditi na ovoj razini.
1- S komandne konzole moramo izvršiti sljedeću uputu pomoću npm:

 npm install -g manje

2- Prethodni korak nas je natjerao da instaliramo kompajler Manje.js, zvao lessc, ovo što radi je da transformira naš kôd manje u valjanom CSS kodu za upotrebu u pregledniku, pa ćemo ga testirati, za to ćemo stvoriti datoteku pod nazivom primjer.nema sa sljedećim kodom unutra:

 @boja: plava; .highlight () {boja: @boja;} p {.highlight ();}

3- Nakon što je gore navedeno učinjeno, idemo na našu konzolu i izvršavamo sljedeću uputu za generiranje datoteke .css gdje će počivati ​​naš sastavljeni kod:

 lessc example.less> example.css

U našoj rezultirajućoj datoteci dobit ćemo ono što vidimo na sljedećoj slici:

Ako želimo komprimirani rezultat ili minificirano samo dodajte -x parametar nakon poziva lessc poput sljedećeg:

 lessc -x example.less> example.css

Ono što nam daje sljedeće minificirani css kao rezultat:

U posljednjem primjeru instalacija prema načinu uporabe vidjeli smo da se boja stavlja na jednostavnu naljepnicu str radimo nekoliko stvari, prvo definiramo varijablu boje sa @ modifikator, to znači da možemo pozvati boje ili vrijednosti unutar varijabli u cijelom dokumentu, tako da možemo imati varijablu @colorTitle i s time znamo da bilo gdje želimo koristiti naslovnu boju samo taj poziv upućujemo.
Rutine za višekratnu upotrebuJoš jedna stvar koju smo vidjeli je da smo stvorili funkciju koja se zove .highlight () a unutra postavljamo atribut CSS i njegova je vrijednost bila naša varijabla, ovo je još jedan primjer kako možemo izgraditi rutine za višekratnu upotrebu unutar naših stilova, tako da u bilo kojoj klasi ili atributu koji želimo istaknuti nešto moramo samo nazvati tu funkciju kao što smo to učinili unutar elementa p u primjer.
Tako vidimo da je važnost Manje.js je da nam pomaže da više razmišljamo o tome kako učiniti manje, pa tako rezultirati sažetim, valjanim i lako čitljivim kodom na kraju, u primjeru se moglo reći da je mnogo napisano za tako malo CSS rezultat je, ali ideja je da kad moramo puno raditi CSS -a, pišemo manje, pa to vidimo Manje.js ispada kad napravimo velike stilske tablice.
Ovim smo završili ovaj vodič, naučili smo napraviti prve korake Manje.js, pa sada imamo dobre alate za izradu izvrsnih aplikacija ili web stranica koristeći najmanju moguću količinu koda.