@Extend og arv i Sass | Forklart

Å skrive en ren og lesbar CSS -kode som ikke gjentar overflødige verdier er absolutt mulig ved å bruke syntaktisk fantastiske stilark (SASS). Mens stylingelementer på en webside ofte kommer vi over en situasjon der elementer er stylet på lignende måte som bare er forskjellige i mindre detaljer. Å skrive et stilark for slike elementer kan vise seg å være veldig hektisk fordi mengden overflødige verdier ville være enorm. For å unngå slike situasjoner gir Sass @Extend -regelen. Dette innlegget diskuterer denne regelen i detalj.

Sass @xtend regel og arv

Når elementene dine er stylet på lignende måte som bare er forskjellige i mindre detaljer, vil du arve lignende egenskaper til ett element til et annet. Dette er mulig ved å bruke @Extend -regelen som lar deg arve egenskaper som brukes til en velger til en annen.

La oss prøve å forstå denne regelen og hvordan den hjelper med å arve lignende CSS -egenskaper ved hjelp av et eksempel.

Eksempel

I eksemplet nedenfor antar vi at det er flere meldinger som vises på nettstedet vårt, for eksempel feilmelding, advarsel, suksessmelding osv. For å style disse elementene definerer vi først en klasse .Meldingsstandard som inneholder alle egenskapene som er overflødige for alle slags meldinger som vises på vår hjemmeside.

Sass

.melding-standard
polstring: 5px;
Grense: 2px solid grå;
tekst-align: sentrum;
Farge: Hvit;

Nå er dette den grunnleggende stilen som alle meldingene vil ha uansett hva deres type er. Når det gjelder styling av disse meldingene, kan du arve disse egenskapene fra .Meldingsstandardklasse sammen med å skrive andre stylingegenskaper for hver type melding.

Sass

.melding-feil
@forlenge .Meldingsstandard;
bakgrunnsfarge: blå;

.Meldingvarsel
@forlenge .Meldingsstandard;
bakgrunnsfarge: rød;

.Meldingssuksess
@forlenge .Meldingsstandard;
bakgrunnsfarge: grønn;

Nå kan du legge merke til at vi i ovennevnte kodebit har brukt @Extend -regelen for å arve egenskapene fra .Meldingsstandardklasse for å style hver type melding i mellomtiden, og gir hver av dem en annen bakgrunnsfarge. Dette kan spare mye tid og energi, og antall kodelinjer reduserer.

Den resulterende CSS -utgangsfilen vil se slik ut.

.Meldingsstandard, .Meldingsfeil, .Meldingsvarsel, .Meldingssuksess
polstring: 5px;
Grense: 2px solid grå;
tekst-align: sentrum;
Farge: Hvit;

.melding-feil
bakgrunnsfarge: blå;

.Meldingvarsel
bakgrunnsfarge: rød;

.Meldingssuksess
bakgrunnsfarge: grønn;

Når du refererer til disse klassene i HTML -koden din, er det ikke nødvendig å referere til flere klasser, du kan bare bruke klassene som er tilordnet hver av meldingene. For eksempel, ikke bruk dette

, Bare bruk dette

.

Konklusjon

@Extend -regelen i SASS lar deg arve lignende egenskaper når elementene dine er stylet på lignende måte som bare avviker i mindre detaljer. Du kan definere den grunnleggende stilen til slike elementer i en klasse og deretter arve den klassen ved å bruke @Extend -regelen i andre klasser sammen med ekstra styling for det aktuelle elementet. Å bruke denne regelen kan spare mye tid og redusere kodelinjene og dermed gjøre koden din ren.