Le variabili in CSS 3 grazie alla nuova funzione var()

Scrivere in CSS può essere frustrante in alcuni contesti, perché CSS diversamente da PHP o altri linguaggi, non possiede (o forse è meglio dire: possedeva) le variabili. Questo è il motivo, tra i tanti, che hanno portato alla nascita di pre processori come Sass e Less.

Per fortuna viene in nostro soccorso CSS3, che mette a disposizione una nuova funziona var(), il cui supporto è ancora acerbo ma che può essere utilizzata per iniziare a fare i primi esperimenti.

Come usare le variabili di CSS 3 – esempio

CSS 3 e l’utilizzo delle variabili è davvero molto semplice. Normalmente dovremmo riutilizzare varie volte lo stesso valore, riscrivendolo. Certo, esistono i “find and replace“, tuttavia è più pulito ed elegante un codice che preveda l’uso di variabili. Ad esempio se vogliamo impostare dei colori principali e secondari, all’interno del nostro sito, da riutilizzare sempre oppure se vogliamo impostare un font primario, le variabili fanno al caso nostro.

Dichiarare le variabili

La prima cosa che devi fare nel tuo file CSS è dichiarare queste variabili. Puoi dichiararle usando il selettore :root oppure body, in questo modo:

:root {
 --color-main: orange;
 --color-secondary: lightblue;
 --font-main: Helvetica;
 --width-standard: 40%;
 --padding-standard: 1em 5%;
 }

In questo caso, ho impostato:

  • colore primario e secondario
  • font primario
  • larghezza e padding standard che voglio riutilizzare uguali in più punti

A questo punto il gioco è quasi fatto: non ti resta che utilizzare il nome della variabile in un punto del CSS che desideri, per assegnare il valore della variabile ad un altro selettore.

Io ad esempio ho utilizzato questo codice:

#prova-1,
 #prova-2 {
 width: var(--width-standard);
 float: left;
 padding: var(--padding-standard);
 font-family: var(--font-main);
 }

#prova-1 {
 background: var(--color-main);
 }

#prova-2 {
 background: var(--color-secondary);
 }

Quindi si usa la funzione var(nome-variabile), per richiamare il valore di quella variabile. Trovi l’esempio completo su codePen:

See the Pen Variabili in CSS by Francesco Caruccio (@coderevolution) on CodePen.

Conclusioni

Siamo ancora molto lontani dalle performance di Sass/Less, tuttavia citando un famoso astronauta, questo possiamo considerarlo come

“un piccolo passo per il CSS, un grande passo per il frontend developer”