VAR -funksjonen i CSS | Forklart

CSS er et stylingspråk som består av mange kjennetegn. Et slikt kjennetegn er at det lar brukerne erklære tilpassede egenskaper som også blir referert til som CSS -variabler. Disse variablene består av spesifikke navn og verdier, og en gang erklært at disse kan brukes hvor som helst i filen. For å bruke disse variablene gir CSS en funksjon etter navnet var () -funksjonen som vi skal diskutere i detalj i denne skrivingen. Dette innlegget inkluderer følgende emner.

1. var () funksjon

2. Fordeler med var () -funksjon

Var () -funksjonen i CSS

For å inkludere en tilpasset eiendom eller en CSS -variabel som kan brukes andre steder i stilarket, brukes VAR () -funksjonen.

Syntaks

var () = var (-eiendomsnavn, eiendomsverdi)

Parametere forklart

eiendomsnavn: Angir navnet på den tilpassede eiendommen. Det er en nødvendig parameter.

Eiendomsverdi: Angir verdien av den tilpassede eiendommen. Det er en valgfri parameter.

Poeng å huske!

1. CSS -regler definerer at CSS -variablene har enten et lokalt eller et globalt omfang. En global variabel kan brukes hvor som helst i hele dokumentet; I mellomtiden kan en lokal variabel bare hentes av velgeren den er definert i.

2. For å lage en global variabel ved hjelp av VAR () -funksjonen, må den erklæres i: Rotvelgeren

3. I mellomtiden kan det opprettes en lokal variabel.

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;
--Hvit: #FFFFFF;
--Brown: #964B00;
--Blå: #0000ff;

kropp
bakgrunnsfarge: var (-rosa);

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

P
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 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

La oss forstå var () -funksjonen videre med et annet eksempel.

Html

Skriv inn navnet ditt:



Skriv inn kontakten din:



Skriv inn din email:



Sende inn

Her har vi opprettet tre inngangsfelt og en knapp.

CSS

: root
--Main-BG-Color: Pink;
--Hovedtekstfarge: Blå;
--Hovedpadling: 5px;

.input1
bakgrunnsfarge: var (-Main-BG-Color);
Farge: var (-hovedtekstfarge);
polstring: var (-hovedpadling);

.input2
bakgrunnsfarge: var (-Main-BG-Color);
Farge: var (-hovedtekstfarge);
polstring: var (-hovedpadling);

.input3
bakgrunnsfarge: var (-Main-BG-Color);
Farge: var (-hovedtekstfarge);
polstring: var (-hovedpadling);

knapp
bakgrunnsfarge: var (-Main-BG-Color);
Farge: var (-hovedtekstfarge);
polstring: var (-hovedpadling);

I koden ovenfor erklærer vi tre globale variabler: en for bakgrunnsfarge, en for tekstfarge og siste en for polstring. Vi bruker deretter disse tre globale variablene for å style inndatafeltene og knappene våre.

Produksjon

VAR () -funksjonen fungerer som den skal.

Merk: Husk at de brukerdefinerte CSS-egenskapene er case-sensitive og eiendomsnavnet må starte med doble bindestreker.

Fordeler med var () -funksjon

Det er mange åpenbare fordeler ved å bruke var () -funksjonen. Vi har listet opp noen av dem nedenfor.

1. Det gjør kodenes forståelighet og lesbarhet tydeligere.

2. Som demonstrert i eksemplene ovenfor, gjør det det lettere å bruke fargeegenskaper.

Konklusjon

VAR () -funksjonen lar deg definere en tilpasset egenskap eller en CSS -variabel som kan brukes andre steder i stilarket en gang erklært. Du kan erklære en global variabel i: Root Selector og bruke den i hele dokumentet ved hjelp av VAR () -funksjonen, dessuten kan du også opprette en lokal variabel i en spesifikk velger og deretter bruke den gjennom VAR () -funksjonen. Du må spesifisere det tilpassede egenskapenavnet eller CSS-variabelen som starter med doble bindestreker, dessuten er dette case-følsomme, så det må tas spesiell forsiktighet. Dette innlegget diskuterer var () -funksjonen i CSS i detalj sammen med å demonstrere noen relevante eksempler.