Quando si scrive i fogli di stile CSS devi aver notato che spesso devi scrivere alcuni valori particolari come il colore di vari elementi ripetutamente. Pertanto, per evitare che questo CSS consente ai suoi utenti di dichiarare variabili per determinati valori CSS e utilizzarli nel codice invece di scrivere valori più e più volte. Queste variabili sono indicate come variabili CSS di cui abbiamo discusso in modo approfondito in questo articolo. Gli argomenti in discussione in questo post sono i seguenti.

1. Variabili in CSS
2. Vantaggi dell'utilizzo delle variabili CSS
3. Dichiarare variabili CSS globali e locali
4. Valori di fallback
5. Variabili prevalenti in CSS

Variabili in CSS

CSS consente ai suoi utenti di creare proprietà personalizzate costituite da nomi e valori particolari che vengono definiti variabili CSS. Queste variabili quando dichiarate possono essere utilizzate dove mai richiesto nel documento.

Allo scopo di dichiarare queste variabili, è necessario seguire una determinata serie di regole:

• Il primo è che il nome della proprietà personalizzata o della variabile CSS deve iniziare con doppi trattini.
• Questi sono anche distintivi al caso.

Ecco come nominare queste variabili.

--text-color: blu;

Per accedere a queste variabili nei fogli di stile viene utilizzata la funzione var () in CSS. Ecco come usi la funzione var ().

var (-text-color);

Vantaggi dell'utilizzo delle variabili CSS

Di seguito abbiamo menzionato alcuni vantaggi dell'utilizzo delle variabili in CSS.

1. Quando stai costruendo un sito Web molto complicato noterai che i tuoi valori CSS si ripete troppo spesso. Pertanto, per evitare di scrivere gli stessi valori più volte, è possibile generare una variabile CSS. Queste variabili sono archiviate in un unico posto e sono accessibili in qualsiasi altra parte del file.
2. Un altro vantaggio delle variabili CSS o delle proprietà personalizzate è che questi sono facili da capire poiché questi sono dichiarati dagli stessi sviluppatori. Ad esempio, -Text -color è molto più comprensibile di #0000FF.

Dichiarare variabili CSS globali e locali

Le regole CSS affermano che le variabili CSS hanno un ambito locale o globale. Una variabile con portata globale può essere utilizzata ove necessario nell'intero documento. Nel frattempo, una variabile con un ambito locale può essere recuperata solo dal selettore in cui è definito.

Ai fini della creazione di una variabile globale utilizzando la funzione var (), deve essere dichiarata nel selettore root. Nel frattempo, una variabile locale può essere creata all'interno di qualsiasi selettore.

Sintassi

Per variabili con portata globale.

:radice
--Padding principale: 5px

La sintassi afferma che qualsiasi elemento che accede alla funzione di -main -padding tramite var () avrà un'imbottitura di 5px.

Per variabili con portata locale.

P
--Main-text-color: Brown;
Colore:-Main-text-color;

Ora possiamo usare la variabile "-main-text-color" all'interno del selettore "P" localmente e avere il colore marrone.

Esempio 1

Supponiamo di voler utilizzare la funzione var () dichiarando variabili globali.

Html

Questo è un paragrafo.

Nel frammento di codice sopra, abbiamo semplicemente creato un contenitore di div e nidificato un

elemento all'interno di quel contenitore di div.

CSS

:radice
--rosa: #ffc0cb;
--Brown: #964b00;
--Blu: #0000FF;

div
Colore: var (-blu);
Background-color: var (-bianco);
imbottitura: 15px;

H1
Background-color: var (-bianco);
Colore: var (-blu);
Bordo: 3px Solid var (-Brown);
imbottitura: 40px;

Nel codice sopra, abbiamo definito alcune variabili globali nel: root selector ciascuna corrispondente a un colore specifico. Quindi stiamo usando quelle variabili globali nell'intero documento ove richiesto usando la funzione var (). Il vantaggio di fare queste variabili globali e quindi di usarle nella funzione var () è che in questo caso particolare non è necessario definire i colori degli elementi più e più volte, invece usa semplicemente la funzione var ().

Produzione

La funzione var () funziona correttamente.

Esempio 2
Nell'esempio seguente abbiamo dimostrato come dichiarare e utilizzare le variabili CSS sia globali che locali.

Html

Questa è una voce.

Questo è un paragrafo.

Qui abbiamo semplicemente creato un contenitore di div e nidificato una voce e un paragrafo al suo interno.

CSS

:radice
--rosa: #ffc0cb;
--Brown: #964b00;
--Blu: #0000FF;

div
Colore: var (-blu);
Background-color: var (-rosa);
imbottitura: 15px;

H1
Background-color: var (-bianco);
Colore: var (-blu);
Bordo: 3px Solid var (-Brown);
imbottitura: 40px;

P
--Purple: #6a0dad;
colore: var (-viola);
Bordo: 2px Solid var (-Brown);
Font-size: 16px;
imbottitura: 20px;

Nel codice sopra, abbiamo creato alcune variabili globali nel selettore: root e successivamente utilizzarle attraverso la funzione var () nell'intero documento per modellare i nostri elementi. Nel frattempo, se lo noti nel P Selettore, abbiamo creato una variabile locale con il nome -Pruttista per fornire un colore viola solo al paragrafo. Questa variabile locale è possibile accedere solo al selettore in cui è dichiarato.

Produzione

Al paragrafo è stato dato un colore viola con successo usando una variabile locale.

Valori di fallback

I valori di fallback sono considerati sostituti, quando si desidera accedere a una variabile CSS usando la funzione var (), tuttavia, la dichiarazione della variabile non è valida o se la variabile non è ancora dichiarata. Questi sono anche utili quando si usano elementi personalizzati o DOM ombra.

Ai fini della dichiarazione dei valori di fallback, è necessario seguire una determinata serie di regole che abbiamo menzionato qui.

1. Il primo parametro passato alla funzione var () deve essere il nome della proprietà personalizzata che verrà utilizzata come sostituto.
2. Il secondo parametro passato alla funzione dovrebbe essere un valore di fallback che fungerà da sostituto della proprietà personalizzata non valida.

Ecco un esempio.

div
Colore: var (-text-color, rosso);

Lo snippet di codice sopra definisce che usa il colore rosso che è un valore di fallback come sostituto del colore del testo se -text -color non è dichiarato.

Ora che abbiamo capito quali sono le variabili in CSS, passiamo al nostro prossimo argomento.

Variabili prevalenti in CSS

Preverdire una variabile è un fenomeno in cui una variabile sostituisce un'altra. Ora che abbiamo imparato a dichiarare le variabili CSS con un ambito globale o un ambito locale, vediamo come possiamo sovrascrivere queste variabili ove richiesto.

Esempio

Per dimostrare la procedura prevalente, stiamo usando l'esempio sopra usato. Qui una variabile locale sovrascriverà una variabile globale.

CSS

:radice
--rosa: #ffc0cb;
--Brown: #964b00;
--Blu: #0000FF;

div
Colore: var (-blu);
Background-color: var (-rosa);
imbottitura: 15px;

H1
Background-color: var (-bianco);
Colore: var (-blu);
Bordo: 3px Solid var (-Brown);
imbottitura: 40px;

P
--Blu: #000080;
Colore: var (-blu);
Bordo: 2px Solid var (-Brown);
Font-size: 16px;
imbottitura: 20px;

Quello che abbiamo fatto nel codice sopra è che abbiamo dichiarato una variabile globale -blu e lo stiamo utilizzando per modellare alcuni elementi. Tuttavia, quando si tratta di

elemento vogliamo dargli una tonalità diversa del colore blu, quindi all'interno del selettore p stiamo definendo una variabile locale con lo stesso nome "-blue" ma ha un valore diverso. Pertanto, questa variabile locale sovrascriverà la variabile globale.

Produzione

Un colore della marina è stato fornito al paragrafo utilizzando una variabile locale.

Conclusione

CSS consente ai suoi utenti di creare proprietà personalizzate costituite da nomi e valori particolari che vengono definiti variabili CSS. Queste variabili possono essere utilizzate in seguito nell'intero foglio di stile. Inoltre, questi hanno un ambito globale o un ambito locale ed è possibile accedere utilizzando la funzione var (). Puoi evitare di scrivere i valori CSS ripetuti usando queste variabili, inoltre, questi sono più facili da capire. È anche possibile sovrascrivere le variabili CSS tra loro. In questo articolo, abbiamo discusso delle variabili CSS e come sovrascriverle in dettaglio usando vari esempi.