Guide / CSS — fogli di stile / Variabili CSS (custom properties)

Variabili CSS (custom properties)

--nome e funzione var().

Le custom properties si dichiarano con --prefisso e si leggono con var(--nome, fallback). Spesso si definiscono su :root per tema globale e si sovrascrivono nei discendenti.

A differenza delle variabili Sass, sono dinamiche nel cascade e nel DOM.

Esempio

:root {
  --brand: #2563eb;
  --radius: 0.5rem;
}
.button {
  background: var(--brand);
  border-radius: var(--radius);
}