Variabler i sass | Forklart

Syntaktisk fantastiske stilark (SASS) pre-prosesser CSS og fungerer bra med alle versjonene. Det forbedrer muligheten til det grunnleggende språket ved å støtte bruken av variabler, hekking, mixins, arv osv. Hvis vi snakker om variablene, er dette en flott måte å forhindre å skrive overflødige CSS -verdier igjen og igjen. For å lære mer om SASS -variabler, følg artikkelen helt til slutten.

Variabler i sass

SASS -variabler brukes til å lagre informasjon som senere kan brukes hvor som helst i stilarket når det er nødvendig. Den typen informasjon som en sassvariabel kan lagre inkluderer farger, tall, strenger, lister, booleaner og nulls.

Syntaks

$ variablename: variableveralue;

For å erklære en SASS -variabel, må du inkludere et dollar ($) -skilt etterfulgt av variabelnavnet, tykktarmen, variabel verdi og en semikolon.

Eksempel
La oss utforske SASS -variabler videre ved hjelp av et eksempel.

Html

Dette er noe avsnitt.

Dette er en div

Dette er vår HTML -fil der vi har laget to elementer som er et avsnitt, og en DIV -beholder. I mellomtiden er lenken til CSS -filen generert som et resultat av samlingen av SASS -filen blitt gitt til HREF -attributtet til taggen.

Sass

$ fontfam: Verdana, sans-serif;
$ FontSize: 35px;
$ fontColor: rosa;
$ Border: 2px solid svart;
$ polstring: 10px;
P
Font-Family: $ Fontfam;
Font-størrelse: $ FontSize;
Farge: $ FontColor;

.container
polstring: $ polstring;
Border: $ Border;

Dette er vår Sass -fil med .SCSS -forlengelse. Her har vi laget fem SASS -variabler, nemlig $ Fontfam, $ FontSize, $ FontColor, $ Border og $ Polstding. Når vi er erklært, bruker vi deretter disse variablene i filen vår for å style våre elementer.

CSS

Dette er vår resulterende CSS -fil.

Produksjon

Elementer ble vellykket stylet ved hjelp av SASS -variabler.

Sass -variabler omfang

Variabler i Sass kan deklareres hvor som helst i dokumentet før disse brukes og kan ha et globalt omfang eller et lokalt omfang.

En SASS -variabel med et globalt omfang er erklært i begynnelsen av filen og senere brukt i hele dokumentet der det er nødvendig.

I mellomtiden er en sassvariabel med et lokalt omfang erklært i en blokk og kan bare brukes innenfor rammen av den aktuelle blokken.

Eksempel
Eksemplet nedenfor viser globale og lokale scoped sass -variabler.

Sass

$ FontSize: 35px;
$ polstring: 10px;
P
Font-Family: $ Fontfam;
Font-størrelse: $ FontSize;
Farge: $ FontColor;

.container
$ Border: 2px solid svart;
polstring: $ polstring;
Border: $ Border;
Font-størrelse: $ FontSize;

Dette er den samme koden som ovenfor med den eneste forskjellen som $ FontSize, og $ polstring er globale variabler og kan brukes hvor som helst i filen, i mellomtiden er $ grensen en lokal variabel og kan bare brukes innenfor rammen av blokken den er erklært i. Denne koden vil ha samme utgang som demonstrert i forrige seksjon. Dessuten vil den resulterende CSS -utgangen også være den samme.

Konklusjon

SASS -variabler brukes til å lagre informasjon som senere kan brukes hvor som helst i stilarket når det er nødvendig. Disse variablene kan lagre farger, tall, strenger, lister, booleaner og null. Navnet på en SASS -variabel må begynne med et dollar ($) -skilt, og disse variablene kan ha enten et globalt omfang eller et lokalt omfang. Dessuten er dette en flott måte å forhindre skriving av overflødige CSS -verdier igjen og igjen. Artikkelen diskuterer SASS -variabler i detalj sammen med relevante eksempler.