Viena no lietām, kas CSS Tajā pēc noklusējuma netiek izmantotas programmēšanas stila struktūras, kurās mēs varam loģiski atkārtoti izmantot kodu. Visvairāk, ko varam sasniegt standarta veidā, ir izveidot klases un grupēt etiķetēs to, ko mēs vēlamies ietekmēt. šīs izmaiņas.
Šī pieeja nozīmē, ka dienas beigās mēs iegūstam garas stilu lapas, un, lai gan šis rezultāts nemainīsies Mazāk.js, ja mainās veids, kā mēs nokļūstam minētajās lapās, tas ir pateicoties Mixins un mantojumu, kur mēs varam deklarēt un izmantot dažus komponentus, lai izvairītos no struktūru manuālas izstrādes.
Prasības1- Lai veiktu šo apmācību, mums būs nepieciešamas dažas lietas iepriekš, mums ir jābūt mapei, kurā mēs varam saglabāt savus failus .bez Y .css, mums ir jābūt atļaujām, lai nepieciešamības gadījumā varētu veikt izmaiņas.
2- Mums ir jābūt funkcionālai instalācijai Mazāk.js, kā arī visi tā priekšnoteikumi, kādi tie ir Node.js Y npm, lai mēs varētu apkopot mūsu izveidotās stila lapas.
3- Visbeidzot, mums būs vajadzīgs arī teksta redaktors, lai varētu izveidot kodu, ko mēs varam izmantot Cildens teksts o NotePad ++, lai gan klasiskais piezīmju grāmatiņa mums arī derēs, tas viss ir atkarīgs no tā, vai mēs vēlamies palīdzību ar kodu vai uzlabotas funkcijas.
Iestatiet CSS rekvizītus, izmantojot MixinViena no pirmajām lietām, kas mums būtu jāzina Mixins, ir tas, ka tās ir metodes, kas palīdz mums noteikt īpašības CSS mūsu projektam, lai palīdzētu mums atkārtoti izmantot kodu un panākt konsekventākus stilus. Mixin īpatnība ir tā, ka, apkopojot mūsu kodu Mazāk Tas netiek ņemts vērā tādā nozīmē, ka netiek ģenerēta Mixins stila lapa, to panāk, iekļaujot iekavas to definēšanā, kad mums ir Mixin, mums ir jāimportē tā avota fails un šādā veidā vienkārši tās vērtības pārnes uz mūsu galveno lapu, kuru mēs iekļausim savā lapā.
Izveidojot mūsu pirmo Mixin
Izveidosim a Mixin kas ļauj mums izveidot īpašumtiesības CSS noapaļot kāda elementa malas mūsu HTML, lai to izdarītu, mums jāveic šādas darbības:
1- Mēs savā projekta mapē izveidosim failu ar nosaukumu mixins.bez, un iekšpusē mēs ievietosim šādu saturu:
.rounded-edge () {border-radius: 7px; }2- Tagad mēs izveidosim failu ar nosaukumu projekts.bez, šeit mēs noteiksim veidu, kādā tiks piemēroti dažādi mūsu lapas stili HTML, lai mēs pierastu pie darba Mazāk mēs izveidosim vairākus noteikumus CSS lai mēs varētu redzēt, kā MixinsApskatīsim kodu, kas mums jāievada šajā failā.
@import "mixins.less"; @ header-background-color: zils; @ content-background-color: zaļa; @ kājenes fona krāsa: sarkana; galvene {. noapaļotas malas (); fona krāsa: @ header-background-color; krāsa: kontrasts (@ header-background-color); } p {.apaļās malas (); fona krāsa: @ content-background-color; krāsa: kontrasts (@ content-background-color); } kājene {. noapaļotas malas (); fona krāsa: @ kājenes-fona krāsa; krāsa: kontrasts (@ kājenes-fona krāsa); }Kā redzam, vispirms importējam failu, ko ģenerējām iepriekšējā solī, tad izveidojam 3 mainīgos, kuriem kā vērtību piešķiram krāsu, visbeidzot sākam veidot klases elementiem HTML, pirmā lieta, ko mēs darām, ir izsaukt savu funkciju Noapaļotas malas (), un pēc tam mēs piešķiram elementu krāsas ar mainīgajiem.
3- Šajā solī mēs izveidosim failu HTML, ko mēs varam saukt par visu, ko vēlamies, ja vien tam ir šāda struktūra:
Mixins ar mazāk La cabeceraKā redzam, mēs vienkārši esam iekļāvuši savu failu .bez kā .js, kurā ir rīks, mēs izvēlējāmies šo opciju, lai nebūtu jāapkopo, tomēr jāatceras, ka to nedrīkst izmantot ražošanā. Ķermenī HTML Mēs ģenerējam dažādus elementus, ko bijām definējuši CSS, lai redzētu stilu pielietojumu.Saturs
Kājene
4- Visbeidzot, ja mēs vēlamies redzēt rezultātu, vienkārši atveriet mūsu dokumentu tādā pārlūkprogrammā kā Firefox un lai mēs varētu redzēt, kā viss izskatās, redzēsim nākamajā attēlā to, ko mēs ieguvām:
Ja mēs ejam nedaudz tālāk un redzam avota kodu, ko pārlūkprogramma interpretē, mēs redzēsim, kā dažādi mainīgie un Mixin piemērots, tas faktiski tika aizstāts ar kodu CSS, kas nozīmē, ka pat tad, ja īpašumu esam uzrakstījuši tikai vienu reizi Mazāk ievieto to vietā, kur atbilstība, redzēsim:
Mantojums mūsu stilu ietvaros
Darbs ar mantojumu mums palīdz, un tāpēc mēs varam izveidot augstākus elementus, kas nodod dažas īpašības saviem zemākajiem vai ietvertajiem elementiem, tas ir, ir kopīgas iezīmes, kuras mums nevajadzēs atkārtot vēlamajos elementos lai tās būtu.
Kā vienmēr, koda neatkārtošanas mērķis ir ietaupīt mums darbu un laiku, kā arī samazināt kļūdas un palielināt mūsu koda apkopi, pateicoties tā resursu konsekvencei un centralizācijai.
Viens no elementārākajiem, bet efektīvākajiem mantošanas darba veidiem ir ligzdoti elementi, pieņemsim, ka mums ir sadaļa HTML un iekšpusē mums būs vairāki elementi, ja izmantosim CSS Klasisks, lai teiktu, ka visiem šīs sadaļas elementiem ir dažas īpašības, taču tās ir atšķirīgas, katram stilam būtu jāizveido vismaz viena rinda, redzēsim, ko mēs domājam:
sadaļas elements1 {saturs1: xx; } sadaļas elements2 {saturs2: zz; }Kā redzam, mēs izveidojam vairāk koda, nekā mums vajadzētu, tā vietā, ja izmantojam mantojumu un ligzdošanu Mazāk mēs varētu sasniegt kaut ko līdzīgu:
sadaļa {elements1 {saturs1: xx; } item2 {content2: zz; }}Kā redzam, mēs ne tikai rakstām mazāk, bet arī tas, ko vēlamies sasniegt, ir daudz loģiskāks, kas palīdz mums izprast un pareizi nošķirt elementus, kurus izmantosim savos stilos.
Radīšana ligzdoti stili
Tagad mēs izmantosim to, ko tikko paskaidrojām iepriekšējā punktā, mums ir jāizveido fails .bez kur mēs veidojam stilu, kas ir ligzdots, lai ietaupītu darbu un padarītu to loģiskāku. Lai sasniegtu šo uzdevumu, mums jāveic šādas darbības:
1- Izveidosim failu.mazāk kā mēs varam saukt mantojums.bez, šeit mēs izveidosim ligzdotus stilus, lai to saprastu, mēs vienkārši redzēsim kodu, kuru mēs ievietosim, un tādējādi koncepcija nonāks pie mums labāk.
sadaļa {h1 {font-size: 4em;} p {padding: 0 5px;}}Mēs redzam, ka esam izveidojuši stilam stilu sadaļa, un ka viss h1 vai lpp šajā konteinera elementā tam ir jādarbojas ar noteiktajiem noteikumiem, kurus esam ievietojuši.
2- Tagad mums jāizveido savs fails HTML kas līdzināsies iepriekšējam uzdevumam, kādas izmaiņas ir iekļaujamo failu nosaukumos un struktūrā ķermenis, bet, ja mēs to redzam abstrakti, mēs runājam par vienu un to pašu, apskatīsim kodu.
Mantojums mazākKā mēs redzam, vienkārši iekļaujot mūsu failu Mazāk ir tas, ka mēs ģenerēsim nepieciešamos stilus, ja redzēsim, kā tas izskatās pārlūkprogrammā, mēs iegūsim kaut ko līdzīgu:Mūsu saturs
Tomēr, ja mēs pamanām, kas notiek ar CSS Kad tas tiks interpretēts vai apkopots, mēs redzēsim, ka mūsu izveidotā ligzdotā forma netiek ievērota, taču, tā kā kompilators šo nesoņu veidlapu veido tieši, mums nav jāuztraucas par to, ka tā ir šādā veidā. kods, ko redz mūsu pārlūkprogramma, izskatās šādi:
Ar to mēs varam pabeigt šo apmācību, kā redzējām Mazāk tā nav tikai rakstīšana CSS savādāk, ir padarīt šīs atšķirības noderīgas, tādējādi ietaupot laiku, padarot lietojumprogrammas draudzīgākas mūsu izstrādes komandai un ietaupot pūles, domājot loģiskāk un atkārtoti izmantojot komponentus. Tam visam ir vislielākā jēga, jo mēs turpinām praktizēt un piemērot šos piemērus praktiskos un reālos gadījumos, lai mēs varētu pierast pie šāda darba veida.
Vai jums patika šī apmācība un palīdzējāt tai?Jūs varat apbalvot autoru, nospiežot šo pogu, lai sniegtu viņam pozitīvu punktu
