Cosa sono le variabili CSS e come usarle
Pubblicato: 2022-02-16Quando scrivi il codice CSS per il tuo sito, puoi utilizzare le proprietà personalizzate CSS (Variabili) per accelerare il processo di sviluppo. È possibile utilizzare le variabili per definire le proprietà (dimensione, colore), che possono poi essere applicate a più elementi.
In questo modo è possibile avere un maggiore controllo sul codice e sul design. La modifica del valore di una variabile in un punto sovrascrive il valore di quella proprietà ovunque venga invocata.
Questo post spiegherà come utilizzare le variabili CSS e alcune applicazioni pratiche.
Iniziamo!
Dichiarazione di una variabile
Le variabili possono avere un ambito globale o locale. Per definire una variabile globalmente, si usa il selettore :root.
:root { --base-font-size: 1.1rem; } :root { --base-font-size: 1.1rem; }Il selettore :root corrisponde alla radice del documento, ovvero <html> nel nostro caso particolare.
Per dichiarare una proprietà personalizzata CSS (Variabile), si inizia con due trattini (--). Le variabili fanno distinzione tra maiuscole e minuscole, ad esempio:
--base-font-size e --Base-Font-Size sono due variabili diverse.
Per definire una variabile localmente si usa il selettore dell'elemento in cui si vuole usare la variabile.
#first-container { --background: #ccc; } #first-container { --background: #ccc; }Una volta definita la variabile, è necessario richiamarla.
La funzione var()
La funzione var() viene utilizzata per inserire il valore della variabile CSS definita. La funzione si sostituisce con il valore della variabile. Diamo un'occhiata a un esempio:
Il codice HTML
- Copia e incolla questo codice nel tuo editor di codice.
- Salva il file come index.html .
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="/style.css"> <title>CSS Variables</title> </head> <body> <div class="wrapper"> <div class="container-1"> <p class="first">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste doloribus dolorum eaque veritatis quia quod?</p> <button type="button">Click here!</button> </div> <div class="container-2"> <p class="second">Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, dolorem. Reprehenderit mollitia quos quia qui.</p> <button type="button">Click here!</button> </div> <div class="container-3"> <p class="third">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi dolor reprehenderit, ad sunt aperiam officiis!</p> <button type="button">Click here!</button> </div> </div> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="/style.css"> <title>CSS Variables</title> </head> <body> <div class="wrapper"> <div class="container-1"> <p class="first">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste doloribus dolorum eaque veritatis quia quod?</p> <button type="button">Click here!</button> </div> <div class="container-2"> <p class="second">Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, dolorem. Reprehenderit mollitia quos quia qui.</p> <button type="button">Click here!</button> </div> <div class="container-3"> <p class="third">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi dolor reprehenderit, ad sunt aperiam officiis!</p> <button type="button">Click here!</button> </div> </div> </body> </html> 
Il codice CSS
- Crea un file chiamato style.css (nella stessa directory di index.html ).
- Incolla il codice qui sotto e salva il file.
/* Global styles */ .wrapper, div { padding: 1rem; } div { margin: 1rem auto; } /* DEFINITION OF VARIABLES */ :root { /* Color palette */ --primary: #007bff; --success: #28a745; --warning: #ffc107; --white: #f9f9f9; --light-grey: #d8d8d8; /* Borders */ /* It is possible to use an already declared variable within the definition of another variable */ --border-primary: 1px solid var(--primary); --border-success: 1px solid var(--success); --border-warning: 1px solid var(--warning); } /* VARIABLES */ /* Wrapper */ .wrapper { background-color: var(--light-grey); } /* First Container */ .container-1 { /* The var() function replaces itself with the value of the variable */ border: var(--border-primary); color: var(--primary); background-color: var(--white); } .container-2 { /* The var() function replaces itself with the value of the variable */ border: var(--border-success); color: var(--success); background-color: var(--white); } .container-3 { /* The var() function replaces itself with the value of the variable */ border: var(--border-warning); color: var(--warning); background-color: var(--white); } .container-1 button { background-color: var(--primary); color: var(--white); } .container-2 button { background-color: var(--success); color: var(--white); } .container-3 button { background-color: var(--warning); color: var(--white); }< button {
border-radius: 5px; } /* Global styles */ .wrapper, div { padding: 1rem; } div { margin: 1rem auto; } /* DEFINITION OF VARIABLES */ :root { /* Color palette */ --primary: #007bff; --success: #28a745; --warning: #ffc107; --white: #f9f9f9; --light-grey: #d8d8d8; /* Borders */ /* It is possible to use an already declared variable within the definition of another variable */ --border-primary: 1px solid var(--primary); --border-success: 1px solid var(--success); --border-warning: 1px solid var(--warning); } /* VARIABLES */ /* Wrapper */ .wrapper { background-color: var(--light-grey); } /* First Container */ .container-1 { /* The var() function replaces itself with the value of the variable */ border: var(--border-primary); color: var(--primary); background-color: var(--white); } .container-2 { /* The var() function replaces itself with the value of the variable */ border: var(--border-success); color: var(--success); background-color: var(--white); } .container-3 { /* The var() function replaces itself with the value of the variable */ border: var(--border-warning); color: var(--warning); background-color: var(--white); } .container-1 button { background-color: var(--primary); color: var(--white); } .container-2 button { background-color: var(--success); color: var(--white); } .container-3 button { background-color: var(--warning); color: var(--white); }< button {
border-radius: 5px; } 
Ci sono alcune cose da notare qui:
- La creazione di una tavolozza di colori è un processo semplice.
- È possibile utilizzare una variabile all'interno della definizione di un'altra variabile, come il colore nella definizione delle variabili di bordo.
- Le variabili vengono ereditate, la proprietà color dell'elemento .container-* influisce sui suoi figli diretti. In questo caso, l'elemento <p>.
Per sovrascrivere una variabile, la dichiari all'interno del suo contenitore, rendendola più specifica.
- Modifica il codice CSS:
button { border-radius: 5px; /* Overriding a global variable */ --primary: #021b35; } button { border-radius: 5px; /* Overriding a global variable */ --primary: #021b35; } 
Variabili e media query
Le variabili possono anche essere ereditate e sovrascritte nelle media query CSS.
- Aggiungi questo codice alle variabili:
:root { /* Color palette */ --primary: #007bff; --success: #28a745; --warning: #ffc107; --white: #f9f9f9; --light-grey: #d8d8d8; /* Borders */ /* It is possible to use an already declared variable within the definition of another variable */ --border-primary: 1px solid var(--primary); --border-success: 1px solid var(--success); --border-warning: 1px solid var(--warning); /* Width of the wrapper 1000px / 90% on smaller devices */ --wrapper-width: 1000px; } :root { /* Color palette */ --primary: #007bff; --success: #28a745; --warning: #ffc107; --white: #f9f9f9; --light-grey: #d8d8d8; /* Borders */ /* It is possible to use an already declared variable within the definition of another variable */ --border-primary: 1px solid var(--primary); --border-success: 1px solid var(--success); --border-warning: 1px solid var(--warning); /* Width of the wrapper 1000px / 90% on smaller devices */ --wrapper-width: 1000px; }Abbiamo definito una larghezza di base per l'elemento wrapper. Possiamo ora applicare queste variabili alla proprietà larghezza .wrapper.
- Aggiungi questo codice alla fine del file CSS:
.wrapper { width: var(--wrapper-width);
margin: 0 auto; } .wrapper { width: var(--wrapper-width);
margin: 0 auto; } 
Per definire una media query per dispositivi con schermi di larghezza inferiore a 1100 px, scriviamo la seguente media query.
- Modifica il codice CSS:
@media screen and (max-width: 1100px) { .wrapper { --wrapper-width: 90%; } } @media screen and (max-width: 1100px) { .wrapper { --wrapper-width: 90%; } } 
La nuova definizione di variabile all'interno della media query ne sovrascrive il valore. Si noti inoltre che la variabile è disponibile nel DOM, il che significa che può essere recuperata e manipolata con JS. Ciò non è possibile con le variabili all'interno dei preprocessori CSS.
Riepilogo
Le variabili sono utili per organizzare e gestire piccole e grandi quantità di CSS. Riducono le ripetizioni e quindi prevengono gli errori. Le variabili CSS sono dinamiche, ovvero possono essere modificate in fase di esecuzione. È facile creare temi per un sito o un'applicazione in modo dinamico con le variabili CSS. Offrono la possibilità di assegnare valori a una proprietà CSS con un nome personalizzato. Le variabili seguono le regole di cascata standard, quindi è possibile definire la stessa proprietà a diversi livelli di specificità.
Spero che questo tutorial ti sia piaciuto. Grazie per aver letto!