Mišiniai ir paveldėjimas su Less.js

Vienas iš dalykų, kurie CSS Pagal numatytuosius nustatymus jis nenaudoja programavimo stiliaus struktūrų, kuriose galime logiškai pakartotinai panaudoti kodą. Daugiausia, ką galime pasiekti standartiniu būdu, yra sukurti klases ir grupuoti etiketes, kurias norime paveikti šiuos pokyčius.

Šis požiūris reiškia, kad dienos pabaigoje mes gauname ilgas stiliaus lenteles, ir nors šis rezultatas nesiskirs Mažiau.js, jei pasikeičia būdas, kuriuo mes pasiekiame minėtus lapus, tai dėka Mixins ir paveldėjimas, kai galime deklaruoti ir naudoti kai kuriuos komponentus, kad nereikėtų rankiniu būdu kurti struktūrų.

Reikalavimai1- Norėdami atlikti šią pamoką, iš anksto pareikalausime tam tikrų dalykų, turime turėti aplanką, kuriame galime saugoti savo failus .nelaimingi Y .css, turime turėti leidimus, kad prireikus galėtume atlikti pakeitimus.

2- Turime turėti funkcionalų įrenginį Mažiau.js, taip pat visas būtinas sąlygas Node.js Y npm, kad galėtume sudaryti sukurtus stiliaus lapus.

3- Galiausiai mums taip pat reikės teksto redaktoriaus, kad galėtume sukurti kodą, kurį galime naudoti Aukščiausias tekstas o „NotePad ++“, nors klasikinė užrašų knygelė mums taip pat tiks, viskas priklauso nuo to, ar norime pagalbos dėl kodo, ar papildomų funkcijų.

Nustatykite CSS ypatybes naudodami „Mixin“Vienas iš pirmųjų dalykų, kuriuos turėtume žinoti Mixinsyra tai, kad jie yra metodai, padedantys mums nustatyti savybes CSS mūsų projektui, kad padėtų mums pakartotinai naudoti kodą ir pasiekti nuoseklesnius stilius. „Mixin“ ypatumas yra tas, kad rengiant mūsų kodą Mažiau Į tai neatsižvelgiama, nes „Mixins“ stiliaus lapas nesukuriamas, tai pasiekiama įtraukiant skliaustelius juos apibrėžiant, kai turime „Mixin“, turime importuoti jo šaltinio failą ir tokiu būdu tiesiog jo vertės perkeltas į mūsų pagrindinį lapą, kurį įtrauksime į savo puslapį.

Kuriame savo pirmąjį Mixin
Sukurkime a Mixin tai leidžia mums nustatyti nuosavybę CSS suapvalinti elemento kraštus mūsų HTML, tam turime atlikti šiuos veiksmus:

1- Projekto aplanke sukursime failą pavadinimu mixins.ne, o viduje įdėsime tokį turinį:

 .rounded-kraštai () {border-spindulys: 7px; }

2- Dabar mes sukursime failą pavadinimu projektas.ne, čia mes nustatysime būdą, kaip bus pritaikyti skirtingi mūsų puslapio stiliai HTML, kad priprastume dirbti Mažiau mes sukursime keletą taisyklių CSS kad galėtume pamatyti, kaip MixinsPažiūrėkime kodą, kurį turime įdėti į šį failą.

 @import „mixins.less“; @ header-background-color: mėlyna; @ content-background-color: žalia; @ poraštės fono spalva: raudona; antraštė {. suapvalinti kraštai (); fono spalva: @ header-background-color; spalva: kontrastas (@ header-background-color); } p {.apvalinti kraštai (); fono spalva: @ content-background-color; spalva: kontrastas (@ content-background-color); } poraštė {. suapvalinti kraštai (); fono spalva: @ footer-background-color; spalva: kontrastas (@ footer-background-color); }

Kaip matome, pirmiausia importuojame failą, kurį sukūrėme atlikdami ankstesnį veiksmą, tada nustatome 3 kintamuosius, kuriems kaip spalvą suteikiame spalvą, galiausiai pradedame kurti elementų klases HTML, pirmas dalykas, kurį mes darome, yra iškviesti savo funkciją Suapvalinti kraštai (), ir tada priskiriame elemento spalvas su kintamaisiais.

3- Šiame etape mes sukursime failą HTML, kurį galime vadinti viskuo, ko norime, jei ji turi tokią struktūrą:

 Maišai su mažiau La cabecera
Turinys
Poraštė 

Kaip matome, mes tiesiog įtraukėme savo failą .nelaimingi kaip .js, kuriame yra įrankis, mes pasirinkome šią parinktį, kad nereikėtų kompiliuoti, tačiau turime nepamiršti, kad tai neturėtų būti taikoma gamyboje. Organizme HTML Mes sugeneruojame skirtingus elementus, kuriuos apibrėžėme CSS, kad pamatytume stilių taikymą.

4- Galiausiai, jei norime pamatyti rezultatą, tiesiog atidarykite savo dokumentą tokioje naršyklėje kaip „Firefox“ kad galėtume pamatyti, kaip viskas atrodo, pažiūrėkime šiame paveikslėlyje, ką gavome:

Jei eisime šiek tiek toliau ir pamatysime šaltinio kodą, kurį interpretuoja naršyklė, pamatysime, kaip skirtingi kintamieji ir Mixin pritaikytas, jis iš tikrųjų buvo pakeistas kodu CSS, o tai reiškia, kad net jei turtą parašėme tik vieną kartą Mažiau padėkite ten, kur atitinka rungtynės, pažiūrėkime:

Paveldas pagal mūsų stilių
Darbas su paveldėjimu mums padeda ir dėl to galime sukurti geresnius elementus, kurie kai kurias savybes perduoda prastesniems ar sudėtingesniems elementams, tai yra, yra bendrų savybių, kurių nereikės kartoti norimuose elementuose juos turėti.

Kaip visada, kodo nekartojimo tikslas yra sutaupyti darbo ir laiko, taip pat sumažinti klaidų skaičių ir padidinti kodo priežiūrą dėl jo išteklių nuoseklumo ir centralizavimo.

Vienas iš pagrindinių, bet efektyviausių paveldėjimo būdų yra įdėti elementai, tarkime, kad turime skyrių HTML ir viduje turėsime kelis elementus, jei naudosime CSS Klasikinis teiginys, kad visi to skyriaus elementai turi tam tikrų savybių, tačiau jie yra skirtingi, kiekvienam stiliui reikėtų padaryti bent vieną eilutę, pažiūrėkime, ką turime omenyje:

 sekcijos elementas1 {turinys1: xx; } sekcijos elementas2 {content2: zz; }

Kaip matome, mes sukuriame daugiau kodo, nei mums reikia, vietoj to, jei naudojame paveldėjimą ir lizdą Mažiau galėtume pasiekti kažką panašaus:

 skyrius {element1 {content1: xx; } elementas2 {turinys2: zz; }}

Kaip matome, mes ne tik rašome mažiau, bet ir tai, ką norime pasiekti, yra daug logiškiau, o tai padeda mums suprasti ir tinkamai atskirti elementus, kuriuos ketiname naudoti savo stiliuose.

Kuriant įdėti stiliai
Dabar mes pritaikysime tai, ką ką tik paaiškinome ankstesniame punkte, turime sukurti failą .nelaimingi kuriame įterptą stilių, kad sutaupytume darbo ir taptume logiškesni. Norėdami atlikti šią užduotį, turime atlikti šiuos veiksmus:

1- Sukurkime failą.mažiau ką galime vadinti paveldėjimas.neš, čia mes sukursime įterptus stilius, kad tai suprastume, tiesiog pamatysime kodą, kurį ketiname įdėti, ir taip koncepcija ateis mums geriau.

 skyrius {h1 {font-size: 4em;} p {padding: 0 5px;}}

Matome, kad sukūrėme elemento stilių skyrius, ir viskas h1 arba p tame konteinerio elemente jis turi veikti pagal nustatytas taisykles, kurias mes įdėjome.

2- Dabar turime sukurti savo failą HTML kuris atrodys panašiai kaip ankstesnis pratimas, kokie pakeitimai yra įtrauktinų failų pavadinimai ir struktūra kūnas, bet jei matome tai abstrakčiai, kalbame apie tą patį, pažvelkime į kodą.

 Paveldėjimas mažiau
Mūsų turinys

Kaip matome tiesiog įtraukdami savo failą Mažiau yra tai, kad mes sukursime reikiamus stilius, jei pamatysime, kaip tai atrodo naršyklėje, gausime kažką panašaus:

Tačiau jei pastebime, kas atsitinka su CSS Kai jis bus interpretuojamas ar sukompiliuotas, pamatysime, kad mūsų sukurta įdėta forma nėra gerbiama, tačiau kadangi kompiliatorius šią neįdėtą formą sukuria tiesiogiai, mes neturime jaudintis, kad ji tokia, todėl pažiūrėkime, kas kodas, kurį mato mūsų naršyklė, atrodo taip:

Su tuo mes galime baigti šią pamoką, kaip matėme Mažiau tai ne tik rašymas CSS kitaip, tai padaryti šiuos skirtumus naudingus, o tai leidžia sutaupyti laiko, padaryti programas patogesnes mūsų kūrėjų komandai ir taupyti pastangas, mąstant logiškiau ir pakartotinai naudojant komponentus. Visa tai mums yra prasmingiausia, nes mes toliau praktikuojame ir taikome šiuos pavyzdžius praktiniais ir realiais atvejais, kad galėtume priprasti prie tokio darbo būdo.

Ar jums patiko ir padėjo ši pamoka?Galite apdovanoti autorių paspausdami šį mygtuką, kad suteiktumėte jam teigiamą tašką