Jedna od stvari koja CSS Prema zadanim postavkama ne koristi strukture u stilu programiranja u kojima možemo ponovno koristiti kôd na logičan način, najviše što možemo postići na standardni način je stvaranje klasa i grupiranje unutar oznaka na što želimo utjecati ove promjene.
Ovaj pristup znači da na kraju dana završavamo s dugim stilovima, iako se taj rezultat neće razlikovati korištenjem Manje.js, ako se promijeni način na koji dolazimo do spomenutih listova, to je zahvaljujući Mixini i nasljeđivanje, gdje možemo deklarirati i koristiti neke komponente, kako bismo izbjegli ručni razvoj struktura.
Zahtjevi1- Kako bismo izvršili ovaj vodič, trebat ćemo unaprijed neke stvari, moramo imati mapu u koju možemo pohraniti naše datoteke .manje Y .css, moramo imati dopuštenja za to kako bismo mogli unositi promjene ako je potrebno.
2- Moramo imati funkcionalnu instalaciju Manje.js, kao i svi njegovi preduvjeti, takvi kakvi jesu Node.js Y npm, kako bismo mogli sastaviti generirane stilske tablice.
3- Konačno, trebat će nam i uređivač teksta da bismo mogli napraviti kôd koji možemo koristiti Uzvišen tekst o NotePad ++, iako će nam raditi i klasični notes, sve ovisi o tome želimo li pomoć s kodom ili naprednim funkcionalnostima.
Postavite CSS svojstva s MixinomJedna od prvih stvari o kojima bismo trebali znati Mixini, je da su to metode koje nam pomažu u utvrđivanju svojstava CSS za naš projekt, na način koji će nam pomoći u ponovnoj upotrebi koda i postizanju dosljednijih stilova. Posebnost Mixina je u tome što pri sastavljanju našeg koda Manje To se ne uzima u obzir, u smislu da se ne stvara tablica sa stilom Mixins, to se postiže uključivanjem zagrada pri njihovom definiranju, nakon što imamo Mixin moramo uvesti njegovu izvornu datoteku i na taj način jednostavno su njegove vrijednosti prebačen na naš glavni list koji ćemo uključiti na našu stranicu.
Stvaranje našeg prvog Mixin
Kreirajmo a Mixin što nam omogućuje da uspostavimo vlasništvo CSS zaokružiti rubove elementa u našem HTML, za to moramo slijediti sljedeće korake:
1- U našoj mapi projekta stvorit ćemo datoteku pod nazivom mixins.nema, a unutra ćemo postaviti sljedeći sadržaj:
.rounded-edge () {border-radius: 7px; }2- Sada ćemo stvoriti datoteku pod nazivom projekt.nema, ovdje ćemo uspostaviti način na koji će se različiti stilovi naše stranice primijeniti HTML, tako da se naviknemo na rad Manje stvorit ćemo nekoliko pravila CSS kako bismo mogli vidjeti kako MixiniPogledajmo kod koji moramo staviti u ovu datoteku.
@import "mixins.less"; @ header-background-color: plava; @ content-background-color: zelena; @ footer-background-color: red; zaglavlje {. zaobljeni rubovi (); background-color: @ header-background-color; boja: kontrast (@ header-background-color); } p {.okružene rubove (); background-color: @ content-background-color; boja: kontrast (@ content-background-color); } podnožje {. zaobljeni rubovi (); background-color: @ footer-background-color; boja: kontrast (@ footer-background-color); }Kao što vidimo, započinjemo uvozom datoteke koju smo generirali u prethodnom koraku, zatim uspostavljamo 3 varijable kojima dajemo boju kao vrijednost, na kraju počinjemo stvarati klase za elemente HTML, prvo što radimo je nazvati našu funkciju Zaobljeni rubovi (), a zatim bojama elemenata dodjeljujemo varijable.
3- U ovom koraku ćemo stvoriti datoteku HTML, koje možemo nazvati kako god želimo sve dok ima strukturu poput ove:
Mixini s manje La cabeceraKao što vidimo, jednostavno smo uključili našu datoteku .manje kao .js koji sadrži alat, odlučili smo se za ovu opciju kako ne bismo morali kompilirati, međutim moramo imati na umu da se to ne smije primijeniti u proizvodnji. U tijelu HTML Generiramo različite elemente koje smo definirali u CSS -u kako bismo vidjeli primjenu stilova.Sadržaj
Podnožje
4- Konačno, ako želimo vidjeti rezultat, samo otvorimo naš dokument u pregledniku poput Firefox i kako bismo mogli vidjeti kako sve izgleda, pogledajmo na sljedećoj slici što smo dobili:
Odemo li malo dalje i vidimo izvorni kod koji preglednik tumači, vidjet ćemo kako se različite varijable i Mixin primijenjen, zapravo je zamijenjen kodom CSS, što znači da čak i ako smo vlasništvo napisali samo jednom Manje postavimo tamo gdje odgovara podudaranje, da vidimo:
Baština unutar naših stilova
Rad s nasljedstvom je nešto što nam pomaže i to je iz razloga što možemo stvoriti superiorne elemente koji neka svojstva prenose na njihove inferiorne ili sadržane elemente, odnosno postoje zajedničke karakteristike koje nećemo morati ponavljati u elementima koje želimo da ih ima.
Kao i uvijek, cilj neponavljanja koda je uštedjeti nam posao i vrijeme, kao i smanjiti pogreške i povećati održivost našeg koda zahvaljujući dosljednosti i centralizaciji njegovih resursa.
Jedan od najosnovnijih, ali najučinkovitijih načina za nasljeđivanje je s ugniježđenim elementima, recimo da imamo odjeljak HTML a iznutra ćemo imati nekoliko elemenata, ako koristimo CSS Klasično je reći da svi elementi tog odjeljka imaju neka svojstva, ali ona su različita, bilo bi potrebno napraviti barem jedan redak za svaki stil, da vidimo na što mislimo:
element element1 {sadržaj1: xx; } element element2 {content2: zz; }Kao što vidimo, stvaramo više koda nego što bi nam trebalo, umjesto toga ako koristimo nasljeđivanje i ugnježđenje Manje mogli bismo postići nešto poput sljedećeg:
odjeljak {element1 {sadržaj1: xx; } item2 {content2: zz; }}Kao što vidimo, ne samo da manje pišemo, već je i prikaz onoga što želimo postići mnogo logičniji, što nam pomaže razumjeti i pravilno odvojiti elemente koje ćemo koristiti u svojim stilovima.
Stvaranje ugniježđeni stilovi
Sada ćemo primijeniti ono što smo upravo objasnili u prethodnoj točki, moramo stvoriti datoteku .manje gdje stvaramo stil koji je ugniježđen, kako bismo uštedjeli posao i učinili ga logičnijim. Da bismo postigli ovaj zadatak, moramo slijediti sljedeće korake:
1- Kreirajmo datoteku.manje kako možemo nazvati nasljedstvo.nema, ovdje ćemo stvoriti ugniježđene stilove, da bismo to razumjeli, jednostavno ćemo vidjeti kôd koji ćemo postaviti i time će nam koncept doći na bolji način.
odjeljak {h1 {font-size: 4em;} p {padding: 0 5px;}}Vidimo da smo stvorili stil za element odjeljak, i to sve h1 ili str unutar tog elementa spremnika mora raditi s utvrđenim pravilima koja smo ugnijezdili.
2- Sada moramo stvoriti našu datoteku HTML koja će jako sličiti prethodnoj vježbi, koje promjene su imena datoteka koje treba uključiti i struktura unutar tijelo, ali ako to vidimo apstraktno, govorimo o istoj stvari, pogledajmo kod.
Nasljedstvo u ManjeKao što vidimo jednostavno uključivanjem naše datoteke Manje je da ćemo generirati potrebne stilove, ako vidimo kako to izgleda u pregledniku dobit ćemo nešto poput sljedećeg:Naš sadržaj
Međutim, primijetimo li što se događa s CSS Kad se interpretira ili sastavi, vidjet ćemo da ugniježđeni oblik koji smo izgradili ne poštuje, ali budući da prevoditelj izrađuje ovaj ne ugniježđeni oblik izravno, ne moramo brinuti hoće li to biti na ovaj način, da vidimo što je kôd koji naš preglednik vidi izgleda:
Ovime možemo završiti ovaj vodič, kao što smo vidjeli Manje nije samo pisanje CSS na drugačiji način, učiniti te razlike korisnima, što nas dovodi do uštede vremena, prilagođavanja aplikacija našem razvojnom timu i uštede truda logičnijim razmišljanjem i ponovnom upotrebom komponenti. Način na koji nam sve ovo ima najviše smisla je da nastavimo vježbati i primjenjivati ove primjere u praktičnim i stvarnim slučajevima kako bismo se navikli na ovakav način rada.
Je li vam se svidio i pomogao ovaj vodič?Autor možete nagraditi pritiskom na ovaj gumb kako biste mu dali pozitivan bod
