Variabili

Le variabili CSS, note anche come proprietà personalizzate CSS, offrono un modo per definire valori riutilizzabili all'interno del nostro codice CSS. Utilizzando le variabili, è possibile creare design dinamici e flessibili che risultano più semplici da mantenere e aggiornare.

Per dichiarare una variabile, si utilizza la pseudo-classe :root all'inizio del file CSS e si antepone il nome della variabile con --. Ad esempio, definiamo una variabile --blue-color con valore #3f42f3 all'interno del blocco :root:

:root {
  --blue-color: #3f42f3;
}

Dopo aver dichiarato una variabile, è possibile applicarla a qualsiasi proprietà CSS utilizzando la funzione var(). Ad esempio, per assegnare alla proprietà color di un elemento <h1> il valore della nostra variabile --blue-color, si può scrivere:

h1 {
  color: var(--blue-color);
}

Unire la conoscenza della dichiarazione e dell'utilizzo delle variabili nel seguente esempio:

In questo esempio, definiamo e applichiamo cinque variabili a qualsiasi proprietà. Modificando i valori di queste variabili, è possibile aggiornare facilmente i colori in tutto il foglio di stile.

Sovrascrivere le proprietà

A volte è necessario sovrascrivere proprietà specifiche in CSS per ottenere lo stile desiderato. Questo può essere realizzato dichiarando una proprietà con lo stesso nome all'interno di un selettore annidato e assegnando un nuovo valore.

Considera il seguente esempio di un semaforo con diversi segnali luminosi:

Mirando alle classi di segnale specifiche, è possibile perfezionare il colore di ciascun segnale mantenendo gli stili condivisi definiti nel selettore base .signal.

Nota

In conclusione, le variabili CSS offrono flessibilità e manutenibilità, consentendo aggiornamenti dinamici del design, mentre la sovrascrittura delle proprietà permette di perfezionare gli stili e ottenere gli effetti visivi desiderati.