En av de saker som CSS Det har inte som standard användning av strukturer i programmeringsstil där vi kan återanvända koden på ett logiskt sätt, det mesta vi kan uppnå på ett standard sätt är att skapa klasser och gruppera inom etiketterna vad vi vill påverkas av dessa förändringar.
Detta tillvägagångssätt innebär att vi i slutet av dagen slutar med långa formatmallar, och även om resultatet inte kommer att variera med Less.js, om det sätt på vilket vi kommer till sagda blad ändras, detta tack vare Mixins och arv, där vi kan deklarera och använda vissa komponenter, för att undvika att behöva utveckla strukturerna manuellt.
Krav1- För att kunna genomföra denna handledning kommer vi att kräva några saker i förväg, vi måste ha en mapp där vi kan lagra våra filer .mindre Y .css, vi måste ha behörighet för att kunna göra ändringar om det behövs.
2- Vi måste ha en funktionell installation av Less.js, liksom alla dess förutsättningar, som de är Node.js Y npm, så att vi kan sammanställa våra genererade formatmallar.
3- Slutligen kommer vi också att behöva en textredigerare för att kunna skapa koden, som vi kan använda Sublim text o NotePad ++, även om det klassiska anteckningsblocket också fungerar för oss, beror det helt på om vi vill ha hjälp med koden eller avancerade funktioner.
Ange CSS -egenskaper med en MixinEn av de första sakerna vi borde veta om Mixins, är att de är metoder som hjälper oss att etablera fastigheterna CSS för vårt projekt, på ett sätt som hjälper oss att återanvända kod och uppnå mer konsekventa stilar. Det speciella med ett Mixin är det när vi sammanställer vår kod Mindre Detta beaktas inte, i den meningen att ett Mixins -stilark inte genereras, detta uppnås genom att inkludera parenteser när de definieras, när vi har en Mixin måste vi importera dess källfil och på detta sätt är dess värden helt enkelt överförts till vårt huvudblad som vi kommer att inkludera på vår sida.
Skapar vår första Blanda i
Låt oss skapa en Blanda i som gör att vi kan etablera ägande CSS att runda kanterna på ett element i vår HTML, för detta måste vi följa följande steg:
1- Vi ska skapa en fil som heter i vår projektmapp mixins. utan, och inuti kommer vi att placera följande innehåll:
.rundade kanter () {gränsradie: 7px; }2- Nu ska vi skapa en fil som heter projekt. utan, det är här vi ska fastställa hur de olika stilarna på vår sida kommer att tillämpas HTML, så att vi vänjer oss vid att arbeta med Mindre vi kommer att skapa flera regler CSS så att vi kan se hur MixinsLåt oss se koden som vi måste lägga i den här filen.
@import "mixins.less"; @ header-bakgrundsfärg: blå; @ innehåll-bakgrundsfärg: grön; @ sidfot-bakgrund-färg: röd; rubrik {. rundade kanter (); bakgrundsfärg: @ header-background-color; color: contrast (@ header-background-color); } p {.rounded-edge (); bakgrundsfärg: @ innehåll-bakgrundsfärg; färg: kontrast (@ innehåll-bakgrund-färg); } sidfot {. rundade kanter (); bakgrundsfärg: @ sidfot-bakgrund-färg; färg: kontrast (@ sidfot-bakgrundsfärg); }Som vi kan se börjar vi med att importera filen som vi genererade i föregående steg, sedan fastställer vi 3 variabler som vi ger en färg som värde, slutligen börjar vi skapa klasserna för elementen HTML, det första vi gör är att kalla vår funktion Avrundade kanter (), och sedan tilldelar vi elementfärgerna med variablerna.
3- I det här steget ska vi skapa filen HTML, som vi kan kalla vad vi vill så länge den har en struktur som följande:
Mixins med Less La cabeceraSom vi kan se har vi helt enkelt gjort införandet av vår fil .mindre som .js som innehåller verktyget valde vi detta alternativ så att vi inte behöver kompilera, men vi måste komma ihåg att detta inte bör tillämpas i produktionen. I kroppen av HTML Vi genererar de olika elementen som vi hade definierat i CSS för att se tillämpningen av stilarna.Innehållet
Sidfot
4- Slutligen, om vi vill se resultatet är det bara att öppna vårt dokument i en webbläsare som Firefox och så att vi kan se hur allt ser ut, låt oss se i följande bild vad vi fick:
Om vi går lite längre och ser den källkod som webbläsaren tolkar, kommer vi att se hur de olika variablerna och Blanda i tillämpas, ersattes det faktiskt med kod CSS, vilket innebär att även om vi bara har skrivit fastigheten en gång Mindre placerar den där matchen motsvarar, låt oss se:
Arvet inom våra stilar
Att arbeta med arv är något som hjälper oss och det är av den anledningen att vi kan skapa överlägsna element som överför vissa egenskaper till deras sämre eller innehållna element, det vill säga det finns gemensamma egenskaper som vi inte kommer att behöva upprepa i element som vi vill ha att ha dem.
Som alltid är målet att inte upprepa kod att spara oss arbete och tid, samt minska fel och öka vår kods underhållbarhet tack vare konsekvensen och centraliseringen av dess resurser.
Ett av de mest grundläggande men effektiva sätten att arbeta arv är med kapslade element, låt oss säga att vi har en sektion HTML och inuti kommer vi att ha flera element om vi använder CSS Klassiskt att säga att alla element i det avsnittet har vissa egenskaper men dessa är olika, det skulle vara nödvändigt att göra minst en rad för varje stil, låt oss se vad vi menar:
avsnitt element1 {content1: xx; } avsnitt element2 {content2: zz; }Som vi kan se gör vi mer kod än vi borde behöva, istället om vi använder arv och häckar in Mindre vi skulle kunna uppnå något liknande följande:
avsnitt {element1 {content1: xx; } item2 {content2: zz; }}Som vi kan se skriver vi inte bara mindre, utan också representationen av vad vi vill uppnå är mycket mer logisk, vilket hjälper oss att förstå och korrekt skilja de element som vi ska använda i våra stilar.
Skapande kapslade stilar
Nu ska vi tillämpa det vi just har förklarat i föregående punkt, vi måste skapa en fil .mindre där vi gör en stil som är kapslad, för att spara arbete och göra det mer logiskt. För att uppnå denna uppgif.webpt måste vi följa följande steg:
1- Låt oss skapa en fil.mindre vad kan vi kalla arv. utan, det är här vi kommer att skapa de kapslade stilarna, för att förstå detta kommer vi helt enkelt att se koden som vi ska placera och därmed kommer konceptet att komma till oss på ett bättre sätt.
avsnitt {h1 {font-size: 4em;} p {padding: 0 5px;}}Vi ser att vi har skapat en stil för elementet sektion, och att allt h1 eller sid inom det behållarelementet måste det arbeta med de fastställda regler som vi har kapat.
2- Nu måste vi skapa vår fil HTML som kommer att se mycket ut som den föregående övningen, vilka ändringar är namnen på filerna som ska inkluderas och strukturen i kropp, men om vi ser det på ett abstrakt sätt talar vi om samma sak, låt oss titta på koden.
Arv i mindreSom vi ser helt enkelt genom att inkludera vår fil Mindre är att vi ska generera de nödvändiga stilarna, om vi ser hur det ser ut i webbläsaren kommer vi att få något liknande följande:Vårt innehåll
Men om vi märker vad som händer med CSS När det tolkas eller kompileras kommer vi att se att den kapslade formen som vi har byggt inte respekteras, men eftersom kompilatorn gör denna icke-kapslade form direkt behöver vi inte oroa oss för att det är så här, låt oss se vad kod som vår webbläsare ser ser ut så här:
Med detta kan vi avsluta denna handledning, som vi såg Mindre det är inte bara att skriva CSS på ett annat sätt är att göra dessa skillnader användbara, vilket leder oss till att spara tid, göra applikationer vänligare för vårt utvecklingsteam och spara ansträngningar genom att tänka mer logiskt och återanvända komponenter. Det sätt som allt detta är mest meningsfullt för oss är att vi fortsätter att öva och tillämpa dessa exempel i praktiska och verkliga fall så att vi kan vänja oss vid detta sätt att arbeta.
Gillade du och hjälpte denna handledning?Du kan belöna författaren genom att trycka på den här knappen för att ge honom en positiv poäng
