Usare le variabili nei file CSS

Nelle recenti versioni dei browser è stato introdotto il supporto per l'utilizzo delle variabili nei file CSS.

Le variabili vanno definite con due meno come prefisso (--colore1) e si utilizzano tramite la funzione var(...), ad esempio:

CSS

body{
  --coloreBianco: #FF0;
  --fontGrande: 32px;
}
.div1 {
  color: var(--coloreBianco);
  font-size: var(--fontGrande);
}
Il supporto delle variabili è relativo alle versioni più recenti dei browser; Chrome dalla versione 49, Firefox dalla versione 52, Edge dalla versione 15 e Opera dalla versione 44. NON sono supportate su nessuna versione di Internet Explorer.

Se le variabili vengono definite all'interno di una classe CSS, risulteranno accessibili solo all'interno della stessa:

CSS

.div1 {
  /* la variabile funziona solo dentro la classe div1 */
  --colorBlue: #0000ff;				
}
.div1 span {
  /* variabile valorizzata */
  color: var(--colorBlue); 
}
.div2 {
  /* variabile NON valorizzata, fuori scope, uso il colore di default (grigio) */
  color: var(--colorBlue, #888);
}
Si può anche ridefinire la variabile in base ad una media query:

CSS

@media screen and (max-width: 768px) {
  /* quando la dimensione della finestra è sotto i 768px, cambio il colore in giallo */
  body {
    --coloreBianco: #ffff00;
  }
}
oppure cambiarla via JavaScript tramite il metodo setProperty:

JavaScript

document.body.style.setProperty('--coloreBianco', '#ff00ff');
in questo caso la ridefinizione tramite media query non funziona più

Demo

Ecco un esempio:

riduci o aumenta la larghezza della finestra per vedere il cambiamento di colore.

Questo è il codice sorgente:

HTML

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Css variable - Sgart.it</title>
    <style>
      body {
				/* dichiaro le variabili */
				--colorRed: #ff0000;	/* rosso */
				--colorGreen: #00ff00;	/* verde */
				--fontBig: 28px;
				
        background-color: #f5f5f5;
        color: #000;
        padding-left: 10px;
        padding-right: 10px;
        font-family:'Source Sans Pro',Arial,"Helvetica Neue",Helvetica,sans-serif;
        font-size:14px;
        line-height:1.42857143;
      }
			.c1 {
				color: var(--colorRed);
			}
			.c2 {
				color: var(--colorGreen);
				font-size: var(--fontBig);
			}
			.div1 {
				/* la variabile funziona solo dentro la classe div1 */
				--colorBlue: #0000ff;				
			}
			.div1 span {
				color: var(--colorBlue);	/* variabile valorizzata */ 
			}
			.div2 {
				color: var(--colorBlue, #888);	/* variabile NON valorizzata, fuori scope, uso il colore di default */
			}
			@media screen and (max-width: 768px) {
				/* quando la dimensione della finestra è sotto i 768px, cambio il colore in giallo */
				body {
					--colorRed: #ffff00;
					--colorGreen: #ffff00;
				}
			}
			</style>
			<script type="text/javascript">
				function changeVarColor(){
					/* cambio il colore in viola ( la media query non funziona più ) */ 
					document.body.style.setProperty('--colorRed', '#ff00ff');
				}
			</script>
  </head>
  <body>
    <h1>Css variable - Sgart.it</h1>

    <div class="c1">colorRed</div>
    <div class="c2">colorGreen</div>
		<div class="div1">
			<span>colorBlue</span>
		</div>
		<div class="div2">colorBlue non funziona (siamo fuori dallo scope) usa il default grigio</div>
		
		<p><button onclick="changeVarColor()">Cabmbia valore variabile in viola </button></p>
  </body>
</html>
Visto che il supporto per le variabili è stato introdotto di recente nei browser e non è presente in Internet Explorer, non conviene usarle in produzione. Vedi Support table for variables
Se serve il supporto per le variabili, al momento, è meglio utilizzare LESS o SASS
Tags:
CSS19 Esempi225 HTML74 HTML 554
Potrebbe interessarti anche: