@mixin og @include i sass | Forklart

Syntaktisk fantastiske stilark (SASS) er populært for å lette brukerne til å skrive tørr (ikke gjenta deg selv) CSS -kode som er ren, mer lesbar og gjenbrukbar. På denne måten øker Sass potensialiteten til det grunnleggende CSS -språket. En slik måte å skrive en gjenbrukbar CSS -kode ved hjelp av SASS er gjennom opprettelsen av en mixin av @Mixin -regelen og inkludert denne mixin ved hjelp av @include -regelen. For å vite mer om disse reglene, følg artikkelen nedenfor.

Sass @mixin og @include regler

@Mixin -regelen i Sass lar deg opprette en gjenbrukbar CSS -kode. Denne gjenbrukbare koden består av stiler som er overflødige, derfor er disse gruppert sammen slik at disse kan brukes hvor som helst i koden der det er nødvendig. Dette kodestykket kalles en mixin. For å bruke en mixin i koden din, gir Sass @include -regelen.

Her vil vi veilede deg om hvordan du lager og bruker en mixin.

Hvordan definere en mixin

For å definere en mixin, bruk @mixin -direktivet og gruppere dine overflødige og gjenbrukbare CSS -stiler sammen.

Syntaks av @mixin -regel

@mixin mixin-name
Eiendomsverdi;
Eiendomsverdi;

Etter å ha brukt @Mixin -direktivet, må du navngi den aktuelle mixinen og deretter skrive CSS -egenskaper i den blokken, og en mixin vil bli opprettet vellykket. Her er et eksempel på en mixin.

@mixin header
bakgrunnsfarge: grønn;
Font-størrelse: 30px;
Fontvekt: fet;

Voila, en mixin for en header er opprettet! Nå hver gang du trenger å style overskriften din, trenger du ikke å skrive disse egenskapene, igjen og igjen, bare bruk ovennevnte mixin, og du er god til å gå. Men hvordan du bruker denne mixin? Vel, som nevnt ovenfor ved hjelp av @include -regelen kan en mixin brukes.

Syntaks av @include -regel

velger
@include mixin-name;

På denne måten kan du inkludere en mixin i koden din der det er nødvendig. La oss for eksempel inkludere overskriften mixin som vi opprettet ovenfor.

.Overskrift
@include header;

Når SASS -filen er transpilert, vil koden ovenfor gi følgende resulterende CSS -utgangsfil.

.Overskrift
bakgrunnsfarge: grønn;
Font-størrelse: 30px;
Fontvekt: fet;

En annen fordel med denne @include -regelen er at du kan inkludere flere mixins sammen. For eksempel nedenfor har vi inkludert tre mixins i en annen mixin.

@mixin mixin1
@include mixin2;
@include mixin3;
@include mixin4;

På denne måten kan du bruke flere mixins sammen.

Til nå har vi lært om mixins uten å bestå argumenter. I neste avsnitt vil vi se hvordan du kan overføre argumenter til en mixin.

Hvordan gi argumenter til en mixin

Å bestå argumenter til Mixin viser seg nyttige når du vil gruppere et lignende sett med CSS -egenskaper sammen, men verdiene som sendes til disse egenskapene kan variere. Slik kan du definere en mixin ved å gi et argument.

@Mixin Border ($ farge, $ bredde)
Border: $ bredde prikket $ farge;

.container
@include -grensen (rosa, 2px);

.Boks
@include -grensen (lilla, 3px);

I ovennevnte kodebit har vi opprettet en mixin ved navnegrensen og passert den to argumenter. Når vi bruker denne mixin mens vi styler andre elementer har vi brukt @include -regelen, i mellomtiden, verdiene som ble gitt til grensen mixin er forskjellige i hvert tilfelle. Her er argumentene som er bestått satt som variabler.

En annen ting du kan gjøre med Mixins er at du kan tilordne standardverdier til argumentene som er gitt til Mixins.

@Mixin Border ($ bredde: 2px, $ farge: rosa)
Border: $ bredde prikket $ farge;

Hvis du ønsker å oppbevare standardverdiene, er det imidlertid opp til deg, hvis du ønsker å endre en bestemt verdi, er det slik at det vil bli gjort.

.container
@include Border ($ bredde: 3px);

Fargen som brukes på grensen til velgeren vil være den samme som definert i standardverdien.

Konklusjon

@Mixin -regelen i Sass lar deg lage en gjenbrukbar CSS -kode kalt en mixin, der du kan gruppere overflødige CSS -egenskaper og verdier som kan brukes hvor som helst i koden din når det er nødvendig. I mellomtiden brukes @include -regelen til å legge til en mixin i koden din. Du kan også overføre argumenter til en mixin når du vil gruppere et lignende sett med CSS -egenskaper sammen med forskjellige verdier. Dette og mye mer om @mixin og @include -regelen er blitt samlet i denne artikkelen for deg.