Variabili CSS
Le custom properties centralizzano valori riutilizzati come colori e spaziature.
1. Il concetto, spiegato da zero
Le custom properties centralizzano valori riutilizzati come colori e spaziature.
Definisci --colore in :root e usa var(--colore) dove necessario. Puoi ridefinire la variabile in componenti specifici.
2. Un esempio ragionato
Osserva l’esempio e leggi ogni istruzione nell’ordine. Prima di provarlo, fermati a prevedere cosa succederà; capire il motivo del risultato è più importante che memorizzare la sintassi.
:root { --accento: #27b6ff; }
button { background: var(--accento); color: #001521; }Come leggere questo esempio
- Prima di eseguire, immagina come apparirà il risultato nel browser.
- Spiega con parole tue in che modo “variabili css” risolve un problema concreto.
- Rileggi ogni riga del programma e individua i valori che vengono creati o modificati.
- Modifica un valore; confronta il comportamento e annota che cosa è cambiato.
Una variabile non dichiarata senza fallback può rendere invalida una proprietà: usa var(--nome, valore).
3. Adesso tocca a te
Obiettivo dell’esercizio: Definisci un colore di accento e riutilizzalo su un pulsante.
Puoi partire dall’esempio, riprodurlo e poi modificarlo. La soluzione di riferimento è disponibile sotto, ma conviene aprirla soltanto dopo un primo tentativo.
Laboratorio: metti alla prova il codice
CSS · cssL’anteprima è isolata dal sito principale: non inserire password o dati personali nel codice di prova.
Output / esito del controllo
Il risultato comparirà qui.
Mostra la soluzione di riferimento
:root { --accento: #27b6ff; }
button { background: var(--accento); color: #001521; }Confronta il tuo procedimento con quello dell’esempio. Una soluzione differente può essere altrettanto valida se produce risultati corretti.
4. Verifica e ripasso
Quiz: hai capito il concetto?
Quale delle seguenti affermazioni è corretta per questo capitolo?
Definisci --colore in :root e usa var(--colore) dove necessario. Puoi ridefinire la variabile in componenti specifici.
5. Come proseguire
Prima del capitolo successivo, prova a spiegare il concetto a un amico senza leggere il codice. Se non riesci, torna all’esempio e fai una nuova variante: imparare significa anche sperimentare.