La funzione VAR in CSS | Spiegato

CSS è un linguaggio di stile che consiste in molte caratteristiche distintive. Una di queste caratteristiche è che consente ai suoi utenti di dichiarare proprietà personalizzate che vengono anche definite variabili CSS. Queste variabili sono costituite da nomi e valori specifici e una volta dichiarate possono essere utilizzate ovunque nel file. Per utilizzare queste variabili CSS fornisce una funzione con la funzione Name Var () di cui discuteremo in dettaglio in questo articolo. Questo post include i seguenti argomenti.

1. funzione var ()

2. Vantaggi della funzione var ()

La funzione var () in CSS

Ai fini di includere una proprietà personalizzata o una variabile CSS che può essere utilizzata altrove nel foglio di stile, viene utilizzata la funzione var ().

Sintassi

var () = var (--property name, valore della proprietà)

Parametri spiegati

nome della proprietà: Specifica il nome della proprietà personalizzata. È un parametro richiesto.

Costo dell'immobile: Specifica il valore della proprietà personalizzata. È un parametro opzionale.

Punti da ricordare!

1. Le regole CSS definiscono che le variabili CSS hanno un ambito locale o globale. Una variabile globale può essere utilizzata ovunque nell'intero documento; Nel frattempo, una variabile locale può essere recuperata solo dal selettore in cui è definita.

2. Ai fini della creazione di una variabile globale utilizzando la funzione var (), deve essere dichiarata nel selettore root

3. Nel frattempo, una variabile locale può essere creata all'interno di qualsiasi selettore.

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 a

elemento all'interno di quel contenitore di div.

CSS

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

corpo
Background-color: var (-rosa);

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

P
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 di utilizzare la funzione var ().

Produzione

La funzione var () funziona correttamente.

Esempio 2

Comprendiamo ulteriormente la funzione var () con un altro esempio.

Html

Inserisci il tuo nome:



Inserisci il tuo contatto:



Inserisci il tuo indirizzo email:



Invia

Qui abbiamo creato tre campi di input e un pulsante.

CSS

:radice
--main-bg-color: rosa;
--Main-text-color: blu;
--Padding principale: 5px;

.input1
Background-color: var (-main-bg-color);
Colore: var (-main-text-color);
imbottitura: var (-padding main);

.input2
Background-color: var (-main-bg-color);
Colore: var (-main-text-color);
imbottitura: var (-padding main);

.input3
Background-color: var (-main-bg-color);
Colore: var (-main-text-color);
imbottitura: var (-padding main);

Button
Background-color: var (-main-bg-color);
Colore: var (-main-text-color);
imbottitura: var (-padding main);

Nel codice sopra, stiamo dichiarando tre variabili globali: una per il colore di sfondo, una per il colore del testo e l'ultimo per l'imbottitura. Stiamo quindi usando queste tre variabili globali per modellare i nostri campi di input e i nostri pulsanti.

Produzione

La funzione var () funziona correttamente.

Nota: Ricorda che le proprietà CSS definite dall'utente sono sensibili al caso e il nome della proprietà deve iniziare con doppi trattini.

Vantaggi della funzione var ()

Esistono molti ovvi vantaggi dell'utilizzo della funzione var (). Ne abbiamo elencati alcuni di seguito.

1. Rende più chiara la comprensione e la leggibilità del codice.

2. Come dimostrato negli esempi sopra, rende più facile utilizzare le proprietà del colore.

Conclusione

La funzione var () consente di definire una proprietà personalizzata o una variabile CSS che può essere utilizzata altrove nel foglio di stile una volta dichiarato. È possibile dichiarare una variabile globale in: root selector e utilizzarla nell'intero documento utilizzando la funzione var (), inoltre, è anche possibile creare una variabile locale all'interno di un selettore specifico e quindi utilizzare successivamente tramite la funzione var (). È necessario specificare il nome della proprietà personalizzato o la variabile CSS a partire da doppi trattini, inoltre, questi sono sensibili al caso, quindi è necessario assumere un'assistenza speciale. Questo post discute in dettaglio la funzione var () in CSS insieme a dimostrare alcuni esempi pertinenti.