Intermedio12 min

Custom Properties

Le variabili CSS native per creare design system flessibili e temi dinamici.

Custom Properties (Variabili CSS)

Le custom properties sono variabili native del CSS. A differenza delle variabili Sass, sono reattive: cambiano a runtime e seguono l'ereditarietà del DOM.

Definire e usare variabili

css

:root {
  --colore-primario: #C0392B;
  --colore-testo: #1a1a1a;
  --spazio-base: 1rem;
  --raggio-bordo: 0.75rem;
}

.card {
  color: var(--colore-testo);
  padding: var(--spazio-base);
  border-radius: var(--raggio-bordo);
  border: 2px solid var(--colore-primario);
}

Valori di fallback

Puoi fornire un valore di riserva nel caso la variabile non sia definita.

css

.elemento {
  color: var(--colore-custom, #333);
  gap: var(--gap, 1rem);
}

Dark mode con custom properties

Il pattern più potente: ridefinire le variabili in un contesto diverso.

css

:root {
  --sfondo: #ffffff;
  --testo: #1a1a1a;
}

.dark {
  --sfondo: #0a0a0a;
  --testo: #e5e5e5;
}

body {
  background-color: var(--sfondo);
  color: var(--testo);
}

Scope locale

Le variabili possono essere definite su qualsiasi elemento, non solo su :root.

css

.card-premium {
  --colore-accento: gold;
  border-color: var(--colore-accento);
}

●Definisci i token di design in :root
●Usa nomi semantici: --colore-primario, non --rosso
●Le custom properties si ereditano lungo il DOM, come color e font