Når du skriver ned CSS -stilark, må du ha lagt merke til at du ofte trenger å skrive ned noen spesielle verdier som fargen på forskjellige elementer gjentatte ganger. For å unngå denne CSS tillater derfor brukerne å erklære variabler for visse CSS -verdier og bruke dem i koden i stedet for å skrive ned verdier om og om igjen. Disse variablene blir referert til som CSS-variabler som vi har diskutert dyptgående i denne oppskrivningen. Temaer som diskuteres i dette innlegget er som følger.

1. Variabler i CSS
2. Fordeler ved å bruke CSS -variabler
3. Erklærer globale og lokale CSS -variabler
4. Fallback -verdier
5. Overstyrer variabler i CSS

Variabler i CSS

CSS lar brukerne sine lage tilpassede egenskaper som består av bestemte navn og verdier som blir referert til som CSS -variabler. Disse variablene når de er deklarert, kan brukes der noen gang er nødvendig i dokumentet.

For å erklære disse variablene, må du følge et visst sett med regler:

• Den første er at navnet på den tilpassede egenskapen eller CSS -variabelen må starte med doble bindestreker.
• Disse er sånt som følsomme så vel, slik at spesiell forsiktighet må tas.

Slik kaller du disse variablene.

--tekstfarge: blå;

For å få tilgang til disse variablene i dine stilark brukes var () -funksjonen i CSS. Slik bruker du VAR () -funksjonen.

var (-tekstfarge);

Fordeler ved å bruke CSS -variabler

Nedenfor har vi nevnt noen fordeler ved å bruke variabler i CSS.

1. Når du bygger et veldig komplisert nettsted, vil du legge merke til at CSS -verdiene dine vil gjenta altfor ofte. For å unngå å skrive ned de samme verdiene flere ganger, kan du derfor generere en CSS -variabel. Disse variablene lagres på ett sted og kan nås andre steder i filen.
2. En annen fordel med CSS -variabler eller tilpassede egenskaper er at disse er enkle å forstå siden disse er erklært av utviklerne selv. For eksempel er -tekstfarget langt mer forståelig enn #0000ff.

Erklærer globale og lokale CSS -variabler

CSS -regler sier at CSS -variablene har enten et lokalt eller et globalt omfang. En variabel med globalt omfang kan brukes der det er nødvendig i hele dokumentet. I mellomtiden kan en variabel med et lokalt omfang bare hentes av velgeren den er definert i.

For å lage en global variabel ved hjelp av VAR () -funksjonen, må den erklæres i: Rotvelgeren. I mellomtiden kan det opprettes en lokal variabel.

Syntaks

For variabler med globalt omfang.

: root
--Hovedpadling: 5px

Syntaksen sier at ethvert element som får tilgang til -Main -Padding -variabelen gjennom VAR () -funksjonen, vil ha en polstring på 5px.

For variabler med lokalt omfang.

P
--Hovedtekstfarge: Brown;
Farge:-Main-tekstfarge;

Nå kan vi bruke "-Main-Text-Color" -variabelen inne i "P" -velgeren lokalt og ha den brune fargen.

Eksempel 1

Anta at du vil bruke var () -funksjonen mens du erklærer globale variabler.

Html

Dette er et avsnitt.

I kodebiten ovenfor har vi ganske enkelt opprettet en div container og nestet en

element inne i den div beholderen.

CSS

: root
--Rosa: #FFC0CB;
--Brown: #964B00;
--Blå: #0000ff;

div
Farge: var (-blå);
bakgrunnsfarge: var (-hvit);
polstring: 15px;

H1
bakgrunnsfarge: var (-hvit);
Farge: var (-blå);
Border: 3px solid var (-brun);
polstring: 40px;

I koden ovenfor har vi definert noen globale variabler i: rotvelgeren som hver tilsvarer en spesifikk farge. Så bruker vi de globale variablene i hele dokumentet der det kreves ved å bruke VAR () -funksjonen. Fordelen med å lage disse globale variablene og deretter bruke dem i VAR () -funksjonen er at du i dette spesielle tilfellet ikke trenger å definere farger på elementer om og om igjen, i stedet bare bruk VAR () -funksjonen.

Produksjon

VAR () -funksjonen fungerer som den skal.

Eksempel 2
I eksemplet nedenfor har vi demonstrert hvordan vi skal erklære og bruke både globale og lokale CSS -variabler.

Html

Dette er en overskrift.

Dette er et avsnitt.

Her har vi ganske enkelt laget en div container og nestet en overskrift og et avsnitt inni den.

CSS

: root
--Rosa: #FFC0CB;
--Brown: #964B00;
--Blå: #0000ff;

div
Farge: var (-blå);
bakgrunnsfarge: var (-rosa);
polstring: 15px;

H1
bakgrunnsfarge: var (-hvit);
Farge: var (-blå);
Border: 3px solid var (-brun);
polstring: 40px;

P
--Lilla: #6A0DAD;
Farge: var (-lilla);
Border: 2px solid var (-brun);
Font-størrelse: 16px;
polstring: 20px;

I koden ovenfor har vi laget noen globale variabler i: Root Selector og senere bruker dem gjennom VAR () -funksjonen i hele dokumentet for å style våre elementer. I mellomtiden, hvis du merker det i p Valg, vi har laget en lokal variabel etter navnet -lilla for å gi en lilla farge til avsnittet bare. Denne lokale variabelen kan bare nås av velgeren den er erklært i.

Produksjon

Avsnittet ble gitt en lilla farge med suksess ved hjelp av en lokal variabel.

Fallback -verdier

Fallback -verdier blir betraktet som erstatninger, når du vil få tilgang til en CSS -variabel ved hjelp. Disse kommer også til nytte når du bruker tilpassede elementer, eller Shadow Dom.

For å erklære tilbakeslagsverdier, må du følge et visst sett med regler som vi har nevnt her.

1. Den første parameteren som sendes til var () -funksjonen, må være navnet på den tilpassede egenskapen som skal brukes som erstatning.
2. Den andre parameteren som er gitt til funksjonen, skal være en tilbakeslagsverdi som vil fungere som en erstatning for den ugyldige tilpassede eiendommen.

Her er et eksempel.

div
Farge: var (-tekstfarge, rød);

Ovennevnte kodebit definerer at bruker rød farge, som er en tilbakevendingsverdi som erstatning for fargen på teksten hvis -tekstfarge ikke er erklært.

Nå som vi har forstått hvilke variabler i CSS er, la oss gå videre til vårt neste emne.

Overstyrer variabler i CSS

Å overstyre en variabel er et fenomen der en variabel erstatter en annen. Nå som vi har lært hvordan vi skal erklære CSS -variabler med enten et globalt omfang eller et lokalt omfang, la oss se hvordan vi kan overstyre disse variablene der det er nødvendig.

Eksempel

For å demonstrere den overordnede prosedyren bruker vi eksemplet som er brukt ovenfor. Her vil en lokal variabel overstyre en global variabel.

CSS

: root
--Rosa: #FFC0CB;
--Brown: #964B00;
--Blå: #0000ff;

div
Farge: var (-blå);
bakgrunnsfarge: var (-rosa);
polstring: 15px;

H1
bakgrunnsfarge: var (-hvit);
Farge: var (-blå);
Border: 3px solid var (-brun);
polstring: 40px;

P
--Blå: #000080;
Farge: var (-blå);
Border: 2px solid var (-brun);
Font-størrelse: 16px;
polstring: 20px;

Det vi har gjort i koden ovenfor, er at vi har erklært en global variabel -blue og at vi bruker den til å style noen elementer. Men når det gjelder

element vi ønsker å gi det en annen nyanse av den blå fargen, så inne i P-velgeren definerer vi en lokal variabel med samme navn "-blå", men det har en annen verdi. Derfor vil denne lokale variabelen overstyre den globale variabelen.

Produksjon

En marinefarge er gitt til avsnittet ved hjelp av en lokal variabel.

Konklusjon

CSS tillater brukerne å lage tilpassede egenskaper som består av bestemte navn og verdier som blir referert til som CSS -variabler. Disse variablene kan senere brukes i hele stilarket. Dessuten har disse enten et globalt omfang eller et lokalt omfang og kan nås ved hjelp av var () -funksjonen. Du kan unngå å skrive ned gjentatte CSS -verdier ved å bruke disse variablene, dessuten er disse lettere å forstå. Det er også mulig å overstyre CSS -variabler med hverandre. I denne oppskrivningen har vi diskutert CSS-variabler, og hvordan du kan overstyre dem i detalj ved hjelp av forskjellige eksempler.