La dichiarazione di una “variabile css” o “proprietà personalizzata” è eseguita utilizzando un nome che inizia con un doppio trattino (--) e un valore che può essere un qualsiasi valore CSS valido:
:root { --particular-padding: 3% 30%; }
@media(max-width: 500px){
:root { --particular-padding: 0% 0%; }
}Il selettore assegnato al set di regole definisce l’ambito in cui può essere utilizzata la proprietà personalizzata. Una best practice comune consiste nel definire proprietà personalizzate sulla :root pseudo-classe, in modo che possa essere applicata globalmente nel documento HTML; in alternativa è possibile indicare altri elementi specifici per delimitare l’area di azione.
element {
--particular-padding: 0% 0%; }
}L’utilizzo prevede che si utilizza il valore della proprietà personalizzata specificando il nome della proprietà personalizzata all’interno della var() funzione, al posto di un normale valore della proprietà.
<div class="row text-center" style="padding: var(--particular-padding);">E’ altresì possibile utilizzare le variabili css all’intero di altre regole css
div.classe {
padding: var(--particular-padding);
}Le variabili css possono essere impostate anche con javascript:
document.documentElement.style.setProperty('--num-immagini', numImages);e recuperate successivamente per effettuare operazioni avanzate
.carosello-container {
display: flex;
width: calc(100% * var(--num-immagini));
height: 100%;
animation: scorrimento calc(var(--num-immagini) * 4s) linear infinite; /* 4s per ogni immagine */
}