Pirmieji žingsniai naudojant „Less.js“

Žiniatinklio programų kūrimas nuveda mus į daugybę kelių, tačiau visi šie keliai turi vieną bendrą bruožą: kodą HTML ir kodą CSS, o tai suteikia daug galimybių, kad mūsų programos atrodytų taip, kaip norime ar įsivaizduojame.
Dabar atsitinka taip, kad kadangi kiekvienas žmogus turi savo tobulėjimo būdą, daug kartų gaunami kodai yra labai platūs arba šiek tiek netvarkingi, dėl to šiek tiek nukenčia priežiūra ir našumas. Čia ateina bibliotekos ir išankstiniai procesoriai, kurie padeda mums parašyti šiek tiek švaresnį ir efektyvesnį kodą, taip padedant komandiniam darbui, nes daugelis šių bibliotekų verčia mus rašyti geresnį kodą.
Mažiau.jsvardas Mažiau.js yra kilęs iš žodžių junginio „CSS Leaner“, kažkas kaip CSS plonesnis ar mažesnis, o tai jau leidžia mums suprasti, ką šis išankstinis procesorius ketina daryti, o tai ne kas kita, kaip padėti mums parašyti mažiau CSS kodo, taip pagerinant mūsų programų ir tinklalapių skaitomumą ir našumą. Jis pagrįstas „JavaScript“ todėl galime jį naudoti kliento pusėje, nors ši praktika nerekomenduojama gamybai, arba serverio pusėje npm ir „Node.js“, todėl jis gali tapti kai kurių papildiniu „JavaScript“ sistema kad šiuo metu vairuojame.
Pagrindinė idėja, kurią reikia priimti Mažiau.js mūsų vystymosi aplinkoje, yra padėti įgyvendinti principą SAUSAS, o tai reiškia, kad nesikartojame, ir to pasiekti Mažiau.js apima funkcijas, klases ir kintamuosius, leidžiančius mums parašyti daug daugiau pakartotinai naudojamo kodo nei tai, ką rašytume CSS tiesiogiai.
1- Mums reikia modernios naršyklės, galinčios interpretuoti pavyzdžius, su kuriais susidursime „Google Chrome“ arba „Firefox“ kūrėjų leidimas.
2- Turime turėti tokio stiliaus teksto redaktorių autorius Sublime Text arba „NotePad ++“, kad galėtumėte patogiau parašyti mūsų pavyzdžius.
3- Galiausiai mums reikia leidimų įdiegti elementus per komandų konsolę ir interneto ryšį, kad galėtume atsisiųsti reikiamus išteklius.
MontavimasĮdiegimas Mažiau.js Tai galima padaryti dviem būdais: pirmasis tiesiogiai kliento lygiu, o antrasis - serverio aplinkoje, pvz Node.jsPažvelkime į kiekvieną iš šių būdų žemiau.
Ši diegimo forma yra tokia pat paprasta, kaip tiesiog paskambinti į failą, kuriame yra biblioteka Mažiau.js, ir jis tiesiog jau yra įtrauktas į mūsų aplinką. Norėdami atsisiųsti biblioteką, turime tiesiog eiti į lesscss.org ir atsisiųsti naujausią stabilią versiją.

DIDELIS

Kai turėsime atsisiųstą failą, galėsime pateikti nedidelį pavyzdį, kuris padės mums žinoti, ar mūsų aplinka yra pasirengusi vystytis Mažiau.js, todėl turime atlikti šiuos veiksmus:
1- Mes sukursime aplanką ir viduje sukursime failą pavadinimu index.html, tada rasime failą mažiau.min.js aplanko viduje rajonas versijos Mažiau.js atsisiuntę, papildomai sukursime failą pavadinimu stilius.ne, tai, ką aprašėme, turėtų atrodyti taip, kaip matome toliau:

2- Tada mes parašysime šį kodą žemiau savo viduje index.html kad galėtume kažką pritaikyti CSS Taigi patikrinkite stilių:

 Pirmieji žingsniai naudojant „Less.js“ Mūsų antraštė Turinys Mūsų poraštė

Čia pirmiausia matome struktūrą HTML pagrindinis, kur per kūnas įdėjome etiketę antraštė, etiketė skyrius ir galiausiai etiketė poraštė, tai suteikia mums tris visiškai skirtingus elementus, kuriems galime pritaikyti stilius CSS.
3- Dabar etiketės viduje galva iš ankstesnio kodo ketiname įtraukti savo failą stilius.ne ir po šio įtraukimo failas mažiau.js, šiuo metu labai svarbu tai pabrėžti mažiau.js jis visada bus įtrauktas po mūsų failų .nelaimingi stilių, ir taip pat svarbu pažymėti, kad failai .nelaimingi kurį mes įtraukiame, turi turėti atributą rel taip: rel = "stiliaus lapas / mažiau" nes be to kompiliatorius mažiau jie nežinos, kad turi dirbti su tuo failu. Pažiūrėkime, kaip atrodys mūsų galvos žyma su papildomu kodu, kurį reikia pridėti prie kodo iš ankstesnio veiksmo:

 Pirmieji žingsniai naudojant „Less.js“ 

4- Dabar mes tiesiog turime pridėti keletą stilių CSS failo viduje stilius.ne, toliau pateiktas kodas, kuris skirs skirtingas etiketes, kurias sukuriame skirtingomis spalvomis:

 antraštė {spalva: mėlyna;} skiltis {spalva: pilka;} poraštė {spalva: geltona;}

5- Jei atidarysime savo index.html su naršykle pamatysime, kaip pasikeitė stilius, o jei atidarysime kūrėjo pultą, pamatysime jo spausdinamus pranešimus mažiau.js Norėdami pranešti mums, kad jis veikia, pažiūrėkime, kaip atrodo šis paveikslėlis:

Mes netgi galime atlikti šiek tiek išsamesnį pratimą ir naršyklėje atidaryti savo pavyzdžio šaltinio kodą ir pamatyti, kaip mažiau.js sukūrė kodą CSS į mūsų dokumentą neįtraukiame:

Serverio pusėjeDiegimas kliento pusėje yra labai naudingas kuriant, nes tai leidžia mums atlikti tam tikrą darbą derinimas realiuoju laiku, tokiu būdu stebint dabartinius pokyčius, tačiau gamybos aplinkai tai visai nerekomenduojama, visų pirma, mes švaistome laiką, kol Mažiau.js generuoja stiliaus lapus, antra, todėl, kad įkeliame savo failus .nelaimingi kuriuos gali kopijuoti kiti žmonės. Štai kodėl dabar pamatysime, kaip su juo dirbti Mažiau.js diegdami kompiliatorių, tam naudosime paketų tvarkyklę npm.
Mes turime turėti pavyzdį funkcinis npm, todėl rekomenduojame įdiegti naujausią versiją Node.js mūsų operacinei sistemai.
Mums taip pat reikia pakankamai leidimų, kad galėtume įdiegti paketus npmir vykdyti komandas komandų pulto lygiu, tai labai svarbu, ypač aplinkoje Linux Y „Mac“, kad į vidų „Windows“ leidimus lengviau apdoroti tokiu lygiu.
1- Iš komandų pulto turime vykdyti šią instrukciją npm:

 npm įdiegti -g mažiau

2- Ankstesnis žingsnis privertė mus įdiegti kompiliatorių Mažiau.js, paskambino mažiau, tai daro tai, kad jis keičia mūsų kodą mažiau galiojančiame CSS kode, skirtame naudoti naršyklėje, todėl mes jį išbandysime, todėl sukursime failą pavadinimu pavyzdys.ne su šiuo kodu:

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

3- Kai tai bus padaryta, einame į konsolę ir vykdome šią instrukciją, kad sugeneruotume failą .css kur bus mūsų sudarytas kodas:

 lessc example.less> example.css

Gautame faile gausime tai, ką matome šiame paveikslėlyje:

Jei norime suspausto rezultato arba susmulkintas tiesiog pridėkite -x parametras paskambinus mažiau kaip toliau:

 lessc -x example.less> example.css

Kas mums suteikia tai sutrumpintas css kaip rezultatas:

Paskutiniame įrenginių pavyzdyje pagal naudojimo būdą matėme, kad spalvą reikia užrašyti ant paprastos etiketės p mes darome keletą dalykų, pirmiausia apibrėžiame spalvų kintamąjį su @ modifikatorius, tai reiškia, kad spalvas ar reikšmes galime vadinti kintamaisiais visame dokumente, taigi galime turėti kintamąjį @colorTitle ir tai žinome, kad visur, kur norime naudoti titulinę spalvą, mes tik skambiname.
Daugkartinio naudojimo tvarkaKitas dalykas, kurį pamatėme, buvo tai, kad sukūrėme funkciją pavadinimu . paryškinti () o viduje dedame atributą CSS ir jo vertė buvo mūsų kintamasis, tai yra dar vienas pavyzdys, kaip galime sukurti daugkartinio naudojimo įprastą tvarką pagal savo stilių, todėl bet kurioje klasėje ar atribute, kurį norime paryškinti, turime tiesiog pavadinti šią funkciją, kaip tai darėme p elemento viduje pavyzdys.
Taigi matome, kad svarbu Mažiau.js yra tai, kad tai padeda mums daugiau galvoti apie tai, kaip padaryti mažiau, ir galų gale gauti suspaustą, galiojantį ir lengvai skaitomą kodą, pavyzdyje būtų galima pasakyti, kad daug buvo parašyta už tiek mažai CSS rezultatas, tačiau idėja yra ta, kad kai turime atlikti daug CSS, mes rašome mažiau, todėl tai matome Mažiau.js paaiškėja, kai darome dideles stiliaus lenteles.
Baigę šią pamoką, išmokome žengti pirmuosius žingsnius Mažiau.js, todėl dabar turime gerų įrankių, kad galėtume sukurti puikias programas ar tinklalapius naudodami mažiausią įmanomą kodą.