En av tingene som CSS Det har ikke som standard bruk av programmeringsstilstrukturer der vi kan gjenbruke koden på en logisk måte, det mest vi kan oppnå på en standard måte er å lage klasser og gruppere innenfor etikettene det vi ønsker å bli påvirket av disse endringene.
Denne tilnærmingen betyr at vi på slutten av dagen ender opp med lange stilark, og selv om resultatet ikke vil variere ved bruk Less.js, hvis måten vi kommer til nevnte blader på endres, er dette takket være Mixins og arv, der vi kan deklarere og bruke noen komponenter, for å unngå å måtte utvikle strukturene manuelt.
Krav1- For å gjennomføre denne opplæringen kommer vi til å kreve noen ting på forhånd, vi må ha en mappe der vi kan lagre filene våre .mindre Y .css, vi må ha tillatelser til det for å kunne gjøre endringer om nødvendig.
2- Vi må ha en funksjonell installasjon av Less.js, så vel som alle dens forutsetninger, slik de er Node.js Y npm, slik at vi kan kompilere våre genererte stilark.
3- Til slutt trenger vi også en tekstredigerer for å kunne lage koden, vi kan bruke Sublim tekst o NotePad ++, selv om den klassiske notisblokken også vil fungere for oss, avhenger alt av om vi ønsker hjelp med koden eller avanserte funksjoner.
Angi CSS -egenskaper med en MixinEn av de første tingene vi bør vite om Mixins, er at de er metoder som hjelper oss med å etablere eiendommene CSS for prosjektet vårt, på en måte som hjelper oss med å gjenbruke kode og oppnå mer konsistente stiler. Spesialiteten til en Mixin er den når du kompilerer koden vår Mindre Dette er ikke tatt i betraktning, i den forstand at et Mixins stilark ikke genereres, oppnås dette ved å inkludere parenteser når vi definerer dem, når vi først har en Mixin må vi importere kildefilen og på denne måten er verdiene ganske enkelt overført til vårt hovedark som vi vil inkludere på siden vår.
Å skape vår første Mixin
La oss lage en Mixin som lar oss etablere eierskap CSS å runde kantene på et element i vår HTML, for dette må vi følge følgende trinn:
1- Vi skal opprette en fil i prosjektmappen vår mixins. uten, og inne vil vi plassere følgende innhold:
.rounded-edge () {border-radius: 7px; }2- Nå skal vi lage en fil som heter prosjekt. uten, det er her vi skal etablere måten de forskjellige stilene på siden vår vil bli brukt på HTML, slik at vi blir vant til å jobbe med Mindre vi skal lage flere regler CSS slik at vi kan se hvordan MixinsLa oss se koden som vi må sette i denne filen.
@import "mixins.less"; @ topptekst-bakgrunnsfarge: blå; @ innhold-bakgrunnsfarge: grønn; @ bunntekst-bakgrunnsfarge: rød; topptekst {. avrundede kanter (); bakgrunnsfarge: @ topptekst-bakgrunnsfarge; farge: kontrast (@ topptekst-bakgrunnsfarge); } p {.rounded-edge (); bakgrunnsfarge: @ innhold-bakgrunnsfarge; farge: kontrast (@ innhold-bakgrunnsfarge); } bunntekst {. avrundede kanter (); bakgrunnsfarge: @ bunntekst-bakgrunnsfarge; farge: kontrast (@ bunntekst-bakgrunnsfarge); }Som vi kan se, starter vi med å importere filen som vi genererte i forrige trinn, deretter etablerer vi 3 variabler som vi gir en farge som verdi, til slutt begynner vi å lage klassene for elementene HTML, det første vi gjør er å kalle vår funksjon Avrundede kanter (), og deretter tildeler vi elementfargene med variablene.
3- I dette trinnet skal vi lage filen HTML, som vi kan kalle hva vi vil så lenge den har en struktur som følgende:
Mixins med Less La cabeceraSom vi kan se, har vi ganske enkelt gjort inkluderingen av filen vår .mindre som .js som inneholder verktøyet, valgte vi dette alternativet slik at vi ikke trenger å kompilere, men vi må huske at dette ikke skal brukes i produksjonen. I kroppen til HTML Vi genererer de forskjellige elementene som vi hadde definert i CSS for å se bruken av stilene.Innholdet
Bunntekst
4- Til slutt, hvis vi vil se resultatet, bare åpne dokumentet vårt i en nettleser som Firefox og så vi kan se hvordan alt ser ut, la oss se på det følgende bildet hva vi fikk:
Hvis vi går litt lenger, og ser kildekoden som nettleseren tolker, vil vi se hvordan de forskjellige variablene og Mixin brukt, ble den faktisk erstattet av kode CSS, noe som betyr at selv om vi bare har skrevet eiendommen én gang Mindre plasser den der kampen tilsvarer, la oss se:
Arven innenfor våre stiler
Å jobbe med arv er noe som hjelper oss, og det er av den grunn at vi kan lage overlegne elementer som overfører noen egenskaper til deres dårligere eller inneholdte elementer, det vil si at det er felles egenskaper som vi ikke trenger å gjenta i elementer vi ønsker å ha dem.
Som alltid er målet om ikke å gjenta koden å spare oss arbeid og tid, samt redusere feil og øke vedlikeholdbarheten av koden vår takket være konsistensen og sentraliseringen av ressursene.
En av de mest grunnleggende, men effektive måtene å arbeide arv er med nestede elementer, la oss si at vi har en seksjon HTML og inne vil vi ha flere elementer, hvis vi bruker CSS Klassisk å si at alle elementene i den delen har noen egenskaper, men disse er forskjellige, det ville være nødvendig å lage minst en linje for hver stil, la oss se hva vi mener:
seksjon element1 {content1: xx; } seksjon element2 {content2: zz; }Som vi kan se, lager vi mer kode enn vi burde trenge, i stedet hvis vi bruker arv og hekker inn Mindre vi kan oppnå noe som følgende:
seksjon {element1 {content1: xx; } item2 {content2: zz; }}Som vi kan se, skriver vi ikke bare mindre, men representasjonen av det vi ønsker å oppnå er mye mer logisk, noe som hjelper oss å forstå og skille elementene vi skal bruke i stilene våre.
Å skape nestede stiler
Nå skal vi bruke det vi nettopp har forklart i forrige punkt, vi må lage en fil .mindre hvor vi lager en stil som er nestet, for å spare arbeid og gjøre det mer logisk. For å oppnå denne oppgaven må vi følge følgende trinn:
1- La oss lage en fil.mindre hva kan vi kalle arv. uten, det er her vi vil lage de nestede stilene, for å forstå dette vil vi ganske enkelt se koden som vi skal plassere, og dermed vil konseptet komme til oss på en bedre måte.
seksjon {h1 {font-size: 4em;} p {padding: 0 5px;}}Vi ser at vi har laget en stil for elementet seksjon, og at alt h1 eller s i det beholderelementet må det fungere med de etablerte reglene som vi har hekket.
2- Nå må vi lage filen vår HTML som kommer til å ligne mye på den forrige øvelsen, hvilke endringer er navnene på filene som skal inkluderes og strukturen i kropp, men hvis vi ser det på en abstrakt måte, snakker vi om det samme, la oss se på koden.
Arv i mindreSom vi ser ganske enkelt ved å inkludere filen vår Mindre er at vi skal generere de nødvendige stilene, hvis vi ser hvordan det ser ut i nettleseren, får vi noe som dette:Innholdet vårt
Men hvis vi merker hva som skjer med CSS Når det blir tolket eller kompilert, vil vi se at den nestede formen vi har bygd ikke blir respektert, men siden kompilatoren lager denne ikke-nestede formen direkte, trenger vi ikke å bekymre oss for at den er på denne måten, la oss se hva koden som nettleseren vår ser slik ut:
Med dette kan vi fullføre denne opplæringen, som vi så Mindre det er ikke bare å skrive CSS på en annen måte, er å gjøre disse forskjellene nyttige, noe som fører oss til å spare tid, gjøre applikasjoner vennligere for vårt utviklingsteam og spare innsats ved å tenke mer logisk og gjenbruke komponenter. Måten alt dette gir mest mening for oss er at vi fortsetter å praktisere og anvende disse eksemplene i praktiske og virkelige saker, slik at vi kan venne oss til denne måten å jobbe på.
Likte og hjalp du denne opplæringen?Du kan belønne forfatteren ved å trykke på denne knappen for å gi ham et positivt poeng
