Variabili CSS : parte 3

Proprietà con Human readable name Un altro uso delle variabili ...

Proprietà con Human readable name
Un altro uso delle variabili css è quando vogliamo salvare un valore di proprietà più complesso, in modo da non doverlo ricordare. Alcuni buoni esempi sono le regole CSS con più parametri, come box-shadow, transform e font.

Inserendo la proprietà in una variabile possiamo accedervi con un nome semantico, leggibile dall’uomo.

:root{
 --ombra: 0 2px 1px 0 rgba(0, 0, 0, 0.2);
 --anima-a-destra: translateX(20px);
}
li{
 box-shadow: var(--ombra);
}
li:hover{
 transform: var(--anima-a-destra);
}

Variabili che cambiano dinamicamente
Quando una proprietà personalizzata viene dichiarata più volte, le regole standard a cascata aiutano a risolvere il conflitto e la definizione più bassa nel foglio di stile sovrascrive quelle sopra. Lo stesso vale per le variabili, che in base all’azione dell’utente ( es. hover: ) consentono di manipolare dinamicamente le proprietà, mantenendo comunque il codice chiaro e conciso.

Kenji Agency : realizzazione siti web a Treviso