Παρεμβολή αριθμητικών μεταβλητών CSS

Μπορούμε να δημιουργήσουμε μεταβλητές στο CSS πολύ εύκολα:

:root {
  --scale: 1;
}

Και μπορούμε να τα δηλώσουμε σε οποιοδήποτε στοιχείο:

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

Ακόμα καλύτερα για ένα παράδειγμα όπως αυτό είναι η εφαρμογή της μεταβλητής σε μια αλληλεπίδραση χρήστη, ας πούμε :hover:

:root {
  --scale: 1;
}

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

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

Αλλά αν θέλαμε να χρησιμοποιήσουμε αυτή τη μεταβλητή σε ένα animation… nada.

:root {
  --scale: 1;
}

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

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

Αυτό συμβαίνει επειδή η μεταβλητή αναγνωρίζεται ως συμβολοσειρά και αυτό που χρειαζόμαστε είναι ένας αριθμός που μπορεί να παρεμβληθεί μεταξύ δύο αριθμητικών τιμών. Εκεί μπορούμε να καλέσουμε @property όχι μόνο να καταχωρίσετε τη μεταβλητή ως προσαρμοσμένη ιδιότητα, αλλά να ορίσετε τη σύνταξή της ως αριθμό:

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

Τώρα έχουμε το animation!

Θα θέλεις ελέγξτε την υποστήριξη του προγράμματος περιήγησης αφού @property έχει προσγειωθεί μόνο στο Chrome (ξεκινώντας μέσα έκδοση 85) από την παρούσα σύνταξη. Και αν ελπίζετε να το μυρίσετε με @supports, αυτή τη στιγμή δεν έχουμε τύχη γιατί δεν δέχεται τους κανόνες ως αξίες… ακόμα. Αυτό θα αλλάξει μια φορά at-rule()γίνεται πραγματικό πράγμα.