Interpolazione di variabili CSS numeriche

Possiamo creare variabili in CSS abbastanza facilmente:

:root {
  --scale: 1;
}

E possiamo dichiararli su qualsiasi elemento:

.thing {
  transform: scale(--scale);
}

Ancora meglio per un esempio come questo è applicare la variabile su un'interazione dell'utente, diciamo :hover:

:root {
  --scale: 1;
}

.thing {
  height: 100px;
  transform: scale(--scale);
  width: 100px;
}

.thing:hover {
  --scale: 3;
}

Ma se volessimo usare quella variabile in un'animazione... nada.

:root {
  --scale: 1;
}

@keyframes scale {
  from { --scale: 0; }
  to { --scale: 3; }
}

/* Nope! */
.thing {
  animation: scale .25s ease-in;
  height: 100px;
  width: 100px;
}

Questo perché la variabile è riconosciuta come una stringa e ciò di cui abbiamo bisogno è un numero che può essere interpolato tra due valori numerici. È lì che possiamo fare appello @property non solo per registrare la variabile come proprietà personalizzata, ma definirne la sintassi come un numero:

@property --scale {
  syntax: "<number>";
  initial-value: 1;
  inherits: true;
}

Ora otteniamo l'animazione!

Avrai voglia di controlla il supporto del browser da @property è arrivato solo in Chrome (a partire da Versione 85) al momento della stesura di questo documento. E se speri di annusarlo con @supports, al momento siamo sfortunati perché non accetta le regole at come valori... ancora. Questo cambierà una volta at-rule()diventa una cosa reale.