En af de ting, der CSS Det har ikke som standard brug af programmeringsstilstrukturer, hvor vi kan genbruge koden på en logisk måde, det mest, vi kan opnå på en standard måde, er at oprette klasser og gruppere inden for etiketterne, hvad vi ønsker at blive påvirket af disse ændringer.
Denne tilgang betyder, at vi i slutningen af dagen ender med lange stylesheets, og selvom resultatet ikke vil variere ved hjælp af Less.js, hvis måden, hvorpå vi kommer til nævnte blade, ændres, er dette takket være Mixins og arv, hvor vi kan deklarere og bruge nogle komponenter, for at undgå at skulle manuelt udvikle strukturerne.
Krav1- For at kunne udføre denne vejledning kræver vi nogle ting på forhånd, vi skal have en mappe, hvor vi kan gemme vores filer .mindre Y .css, vi skal have tilladelser til det for at kunne foretage ændringer, hvis det er nødvendigt.
2- Vi skal have en funktionel installation af Less.js, samt alle dens forudsætninger, som de er Node.js Y npm, så vi kan kompilere vores genererede typografiark.
3- Endelig har vi også brug for en tekstredigerer for at kunne lave koden, vi kan bruge Sublim tekst o NotePad ++, selvom den klassiske notesblok også vil fungere for os, afhænger det hele af, om vi ønsker hjælp til koden eller avancerede funktioner.
Indstil CSS -egenskaber med en MixinEn af de første ting, vi bør vide om Mixins, er, at de er metoder, der hjælper os med at etablere ejendommene CSS til vores projekt på en måde, der hjælper os med at genbruge kode og opnå mere konsistente stilarter. Det særlige ved et Mixin er det, når vi udarbejder vores kode Mindre Dette tages ikke i betragtning, i den forstand, at der ikke genereres et Mixins -stilark, dette opnås ved at inkludere parenteser, når de defineres, når vi har en Mixin, skal vi importere dens kildefil og på denne måde er dens værdier simpelthen overført til vores hovedark, som vi vil inkludere på vores side.
At skabe vores første Mixin
Lad os oprette en Mixin der giver os mulighed for at etablere ejerskab CSS at afrunde kanterne af et element i vores HTML, hertil skal vi følge følgende trin:
1- Vi skal oprette en fil i vores projektmappe mixins. uden, og indeni vil vi placere følgende indhold:
.rounded-edge () {border-radius: 7px; }2- Nu skal vi oprette en fil kaldet projekt. uden, det er her, vi skal etablere den måde, hvorpå de forskellige stilarter på vores side vil blive anvendt HTML, så vi vænner os til at arbejde med Mindre vi skal lave flere regler CSS så vi kan se, hvordan MixinsLad os se koden, som vi skal sætte i denne fil.
@import "mixins.less"; @ header-baggrundsfarve: blå; @ indhold-baggrundsfarve: grøn; @ sidefod-baggrundsfarve: rød; header {. afrundede kanter (); baggrundsfarve: @ header-background-color; farve: kontrast (@ header-baggrundsfarve); } p {.rounded-edge (); baggrundsfarve: @ indhold-baggrundsfarve; farve: kontrast (@ indhold-baggrundsfarve); } sidefod {. afrundede kanter (); baggrundsfarve: @ sidefod-baggrundsfarve; farve: kontrast (@ sidefod-baggrundsfarve); }Som vi kan se, starter vi med at importere den fil, vi genererede i det foregående trin, derefter etablerer vi 3 variabler, som vi giver en farve som værdi, endelig begynder vi at oprette klasserne for elementerne HTML, det første vi gør er at kalde vores funktion Afrundede kanter (), og derefter tildeler vi elementfarverne med variablerne.
3- I dette trin skal vi oprette filen HTML, som vi kan kalde hvad vi vil, så længe det har en struktur som følgende:
Mixins med Less La cabeceraSom vi kan se, har vi simpelthen inkluderet vores fil .mindre som .js, der indeholder værktøjet, valgte vi denne mulighed, så vi ikke skal kompilere, men vi skal huske, at dette ikke bør anvendes i produktionen. I kroppen af HTML Vi genererer de forskellige elementer, som vi havde defineret i CSS for at se anvendelsen af stilarterne.Indholdet
Sidefod
4- Endelig, hvis vi vil se resultatet, skal du bare åbne vores dokument i en browser som Firefox og så vi kan se, hvordan alt ser ud, lad os se i det følgende billede, hvad vi fik:
Hvis vi går lidt længere og ser den kildekode, som browseren fortolker, vil vi se, hvordan de forskellige variabler og Mixin anvendt, blev den faktisk erstattet af kode CSS, hvilket betyder, at selvom vi kun har skrevet ejendommen én gang Mindre placerer det, hvor kampen svarer, lad os se:
Arven inden for vores stilarter
At arbejde med arv er noget, der hjælper os, og det er af den grund, at vi kan oprette overlegne elementer, der overfører nogle egenskaber til deres ringere eller indeholdte elementer, det vil sige, at der er fælles egenskaber, som vi ikke skal gentage i elementer, vi ønsker at have dem.
Som altid er målet om ikke at gentage kode at spare os for arbejde og tid samt reducere fejl og øge vedligeholdelsen af vores kode takket være konsistensen og centraliseringen af dens ressourcer.
En af de mest grundlæggende, men effektive måder at arbejde på arv er med indlejrede elementer, lad os sige, at vi har et afsnit HTML og indeni vil vi have flere elementer, hvis vi bruger CSS Klassisk at sige, at alle elementerne i den sektion har nogle egenskaber, men disse er forskellige, det ville være nødvendigt at lave mindst en linje for hver stil, lad os se, hvad vi mener:
sektionselement1 {indhold1: xx; } sektionselement2 {content2: zz; }Som vi kan se, laver vi mere kode, end vi skulle have brug for, i stedet hvis vi bruger arv og nest i Mindre vi kunne opnå noget som følgende:
sektion {element1 {indhold1: xx; } item2 {content2: zz; }}Som vi kan se, skriver vi ikke kun mindre, men også repræsentationen af det, vi ønsker at opnå, er meget mere logisk, hvilket hjælper os med at forstå og adskille de elementer, som vi skal bruge i vores stilarter.
Oprettelse indlejrede stilarter
Nu skal vi anvende det, vi lige har forklaret i det foregående punkt, vi skal oprette en fil .mindre hvor vi laver en stil, der er indlejret, for at spare arbejde og gøre det mere logisk. For at opnå denne opgave skal vi følge følgende trin:
1- Lad os oprette en fil.mindre hvad kan vi kalde arv. uden, det er her, vi vil oprette de indlejrede stilarter, for at forstå dette vil vi simpelthen se den kode, vi skal placere, og dermed vil konceptet komme til os på en bedre måde.
afsnit {h1 {font-size: 4em;} p {padding: 0 5px;}}Vi ser, at vi har skabt en stil til elementet afsnit, og at alt h1 eller s. s inden for dette containerelement skal det arbejde med de etablerede regler, som vi har indlejret.
2- Nu skal vi oprette vores fil HTML som kommer til at ligne meget på den tidligere øvelse, hvilke ændringer er navnene på filerne, der skal medtages, og strukturen i legeme, men hvis vi ser det på en abstrakt måde, vi taler om det samme, lad os se på koden.
Arv i mindreSom vi ser ved blot at inkludere vores fil Mindre er, at vi kommer til at generere de nødvendige stilarter, hvis vi ser, hvordan det ser ud i browseren, får vi noget som følgende:Vores indhold
Men hvis vi bemærker, hvad der sker med CSS Når det fortolkes eller kompileres, vil vi se, at den indlejrede form, som vi har bygget, ikke respekteres, men da kompilatoren laver denne ikke-indlejrede form direkte, behøver vi ikke bekymre os om, at det er på denne måde, lad os se, hvad kode, som vores browser ser, ser sådan ud:
Med dette kan vi afslutte denne vejledning, som vi så Mindre det er ikke bare at skrive CSS på en anden måde er at gøre disse forskelle nyttige, hvilket får os til at spare tid, gøre applikationer mere brugervenlige for vores udviklingsteam og spare indsats ved at tænke mere logisk og genbruge komponenter. Den måde, hvorpå alt dette giver mest mening for os, er, at vi fortsætter med at øve og anvende disse eksempler i praktiske og virkelige sager, så vi kan vænne os til denne måde at arbejde på.
Kan du lide og hjælpe denne vejledning?Du kan belønne forfatteren ved at trykke på denne knap for at give ham et positivt punkt
