Pirmie soļi ar Less.js

Tīmekļa lietojumprogrammu izstrāde ved mūs pa daudziem ceļiem, taču visiem šiem ceļiem ir viena kopīga iezīme: kods HTML un kods CSS, kas dod mums daudzas iespējas, lai mūsu lietojumprogrammas izskatītos tā, kā mēs vēlamies vai kā mēs iedomājamies.
Tagad notiek tas, ka, tā kā katrai personai ir savs attīstības veids, daudzas reizes iegūtie kodi ir ļoti plaši vai nedaudz nekārtīgi, tas nedaudz ietekmē apkopi un veiktspēju. Šeit nāk bibliotēkas un priekšapstrādātāji, kas palīdz mums uzrakstīt nedaudz tīrāku un efektīvāku kodu, tādējādi palīdzot arī komandas darbam, jo ​​daudzas no šīm bibliotēkām liek mums rakstīt labāku kodu.
Mazāk.jsVārds Mazāk.js cēlies no vārdu savienojuma CSS Leaner, kaut kas kā CSS plānāks vai samazināts, kas jau dod mums priekšstatu par to, ko šis priekšapstrādātājs darīs, kas ir nekas cits kā palīdz mums uzrakstīt mazāk CSS koda, tādējādi uzlabojot mūsu lietojumprogrammu un tīmekļa lapu lasāmību un veiktspēju. Tas ir balstīts uz JavaScript tāpēc mēs to varam izmantot vai nu klienta pusē, lai gan šī prakse nav ieteicama ražošanai, vai arī no servera puses, pateicoties npm un Node.js, tāpēc tas var kļūt par dažu spraudni JavaScript ietvars ka mēs šobrīd braucam.
Galvenā ideja pieņemt Mazāk.js mūsu attīstības vidē ir palīdzēt izpildīt šo principu SAUSS, kas nozīmē neatkārtoties, un to sasniegt Mazāk.js ietver funkcijas, klases un mainīgos, kas ļauj mums uzrakstīt daudz vairāk lietojamu kodu nekā tas, ko mēs rakstītu CSS tieši.
1- Mums ir nepieciešams mūsdienīgs pārlūks, kas spēj interpretēt piemērus, ar kuriem mēs tiksim galā Google Chrome vai Firefox izstrādātāju izdevums.
2- Mums ir jābūt teksta redaktoram tādā stilā Autors: Sublime Text vai NotePad ++, lai varētu ērtāk rakstīt mūsu piemērus.
3- Visbeidzot, mums ir vajadzīgas atļaujas, lai instalētu elementus, izmantojot komandu konsoli un interneta savienojumu, lai lejupielādētu nepieciešamos resursus.
UzstādīšanaUzstādīšana Mazāk.js To var izdarīt divos veidos: pirmais tieši klienta līmenī, bet otrs - servera vidē, piemēram Node.jsTālāk apskatīsim katru no šiem veidiem.
Šī instalēšanas forma ir tikpat vienkārša kā vienkārši izsaukt failu, kas satur bibliotēku Mazāk.js, un tas vienkārši jau ir iekļauts mūsu vidē. Lai lejupielādētu bibliotēku, mums vienkārši jāapmeklē vietne lesscss.org un jālejupielādē jaunākā stabilā versija.

PALIELINĀT

Kad būsim lejupielādējuši failu, varēsim sniegt nelielu piemēru, kas palīdzēs mums zināt, vai mūsu vide ir gatava attīstīties kopā ar Mazāk.jstāpēc mums ir jāveic šādas darbības:
1- Mēs izveidosim mapi un iekšpusē izveidosim failu ar nosaukumu index.html, tad mēs atradīsim failu mazāk.min.js mapes iekšpusē raj versiju Mazāk.js ko esam lejupielādējuši, turklāt mēs izveidosim failu ar nosaukumu stili.bez, mūsu aprakstītajai struktūrai vajadzētu izskatīties zemāk redzamajai:

2- Tad mēs savā iekšpusē rakstīsim šādu kodu index.html lai mums būtu kaut kas, ko varam piemērot CSS un tāpēc pārbaudiet stilus:

 Pirmie soļi ar Less.js Mūsu galvene Saturs Mūsu kājene

Šeit mēs vispirms redzam struktūru HTML pamata, kur atrodas ķermenis mēs ievietojām etiķeti galvene, etiķete sadaļa un visbeidzot etiķete kājene, tas dod mums trīs pilnīgi atšķirīgus elementus, kuriem mēs varam piemērot stilus CSS.
3- Tagad etiķetes iekšpusē galvu no iepriekšējā koda mēs iekļausim savu failu stili.bez un pēc šīs iekļaušanas fails mazāk.js, šajā brīdī ir ļoti svarīgi to uzsvērt mazāk.js tas vienmēr tiks iekļauts pēc mūsu failiem .bez ka stili būs, un ir arī svarīgi atzīmēt, ka faili .bez jāiekļauj atribūts rel sekojoši: rel = "stila lapa / mazāk" jo bez tā kompilators mazāk viņi nezinās, ka viņiem ir jāstrādā ar šo failu. Apskatīsim, kā izskatīsies mūsu galvas tags ar papildu kodu, kas jāpievieno iepriekšējā soļa kodam:

 Pirmie soļi ar Less.js 

4- Tagad mums vienkārši jāpievieno daži stili CSS faila iekšpusē stili.bez, zemāk esošais kods atšķirs dažādas mūsu izveidotās etiķetes ar dažādām krāsām:

 galvene {krāsa: zila;} sadaļa {krāsa: pelēka;} kājene {krāsa: dzeltena;}

5- Ja mēs atveram savu index.html ar pārlūkprogrammu mēs redzēsim, kā stils ir mainījies, un, atverot izstrādātāja konsoli, mēs redzēsim tās izdrukātos ziņojumus mazāk.js Lai darītu mums zināmu, ka tas darbojas, redzēsim nākamajā attēlā, kā tas izskatās:

Mēs pat varam veikt nedaudz padziļinātāku vingrinājumu, un pārlūkprogrammā varam atvērt mūsu piemēra avota kodu un redzēt, kā mazāk.js ģenerēja kodu CSS mūsu dokumentā, kas nav iekļauts:

Servera pusēInstalēšana klienta pusē ir ļoti noderīga, kad mēs izstrādājam, jo ​​tā ļauj mums kaut ko darīt atkļūdošana reālajā laikā, tādējādi novērojot šī brīža izmaiņas, tomēr ražošanas videi tas vispār nav ieteicams, pirmkārt, mēs tērējam laiku, kamēr Mazāk.js ģenerē stila lapas un, otrkārt, tāpēc, ka mēs augšupielādējam savus failus .bez ko var kopēt citi cilvēki. Tāpēc tagad mēs redzēsim, kā ar to strādāt Mazāk.js instalējot kompilatoru, šim nolūkam mēs izmantosim pakotņu pārvaldnieku npm.
Mums ir jābūt gadījumam funkcionāls npm, tāpēc mēs iesakām instalēt jaunāko versiju Node.js mūsu operētājsistēmai.
Mums ir vajadzīgas arī pietiekamas atļaujas, lai varētu instalēt paketes ar npm, un lai izpildītu norādījumus komandu konsoles līmenī, tas ir ļoti svarīgi, jo īpaši vidē Linux Y Mac, tā ka iekšā Windows atļaujas ir vieglāk apstrādāt šajā līmenī.
1- No komandu konsoles mums jāizpilda šāda instrukcija ar npm:

 npm instalēt -g mazāk

2- Iepriekšējais solis lika mums instalēt kompilatoru Mazāk.js, zvanīja mazāk, tas ir tas, ka tas pārveido mūsu kodu mazāk derīgā CSS kodā, ko izmantot pārlūkprogrammā, tāpēc mēs to pārbaudīsim, tāpēc mēs izveidosim failu ar nosaukumu piemērs.bez ar šādu kodu iekšā:

 @krāsa: zila; .izcelt () {krāsa: @krāsa;} p {.izgaismot ();}

3- Kad iepriekš minētais ir izdarīts, mēs ejam uz savu konsoli un izpildām šādu instrukciju, lai ģenerētu failu .css kur atradīsies mūsu apkopotais kods:

 lessc example.less> example.css

Iegūtajā failā mēs iegūsim to, ko redzam šādā attēlā:

Ja mēs vēlamies saspiestu rezultātu vai samazināts vienkārši pievienojiet -x parametrs pēc zvanīšanas mazāk piemēram:

 lessc -x example.less> example.css

Kas dod mums sekojošo samazināts css rezultātā:

Pēdējā instalācijas piemērā saskaņā ar lietošanas veidu mēs redzējām, ka krāsa ir jānovieto uz vienkāršas etiķetes lpp mēs darām vairākas lietas, vispirms mēs definējam krāsu mainīgo ar @ pārveidotājs, tas nozīmē, ka mēs visā dokumentā varam izsaukt krāsas vai vērtības mainīgajos, tāpēc mums var būt mainīgais @colorTitle un ar to mēs zinām, ka visur, kur mēs vēlamies izmantot titulkrāsu, mēs veicam tikai šo zvanu.
Atkārtoti lietojamas rutīnasVēl viena lieta, ko mēs redzējām, bija tā, ka mēs izveidojām funkciju ar nosaukumu . izcelt () un iekšpusē mēs ievietojam atribūtu CSS un tā vērtība bija mūsu mainīgais, tas ir vēl viens piemērs tam, kā mēs varam veidot atkārtoti lietojamas rutīnas savos stilos, tāpēc jebkurā klasē vai atribūtā, kuru vēlamies izcelt, mums vienkārši ir jāsauc šī funkcija, kā mēs to darījām p elementa iekšpusē piemērs.
Tādējādi mēs redzam, ka nozīme ir Mazāk.js tas palīdz mums vairāk domāt par to, kā darīt mazāk, un tādējādi beigās iegūt saspiestu, derīgu un viegli lasāmu kodu, piemēram, varētu teikt, ka daudz tika uzrakstīts par tik maz CSS rezultātā, bet ideja ir tāda, ka, ja mums ir jādara daudz CSS, mēs rakstām mazāk, tāpēc mēs to redzam Mazāk.js izrādās, kad veidojam lielas stilu lapas.
Ar to mēs pabeidzam šo apmācību, mēs esam iemācījušies spert pirmos soļus Mazāk.js, tāpēc tagad mums ir labi rīki, lai varētu izveidot lieliskas lietojumprogrammas vai tīmekļa lapas, izmantojot pēc iespējas mazāk koda.