Voimme tehdä muuttujia CSS:ssä melko helposti:
:root {
--scale: 1;
}Ja voimme ilmoittaa ne millä tahansa elementillä:
.thing {
transform: scale(--scale);
}Vielä parempi tällaisessa esimerkissä on muuttujan soveltaminen esimerkiksi käyttäjän vuorovaikutukseen :hover:
:root {
--scale: 1;
}
.thing {
height: 100px;
transform: scale(--scale);
width: 100px;
}
.thing:hover {
--scale: 3;
}Mutta jos halusimme käyttää sitä muuttujaa animaatiossa… nada.
:root {
--scale: 1;
}
@keyframes scale {
from { --scale: 0; }
to { --scale: 3; }
}
/* Nope! */
.thing {
animation: scale .25s ease-in;
height: 100px;
width: 100px;
}Tämä johtuu siitä, että muuttuja tunnistetaan merkkijonoksi ja tarvitsemme numeron, joka voidaan interpoloida kahden numeerisen arvon väliin. Sinne voimme soittaa @property ei vain rekisteröi muuttujaa mukautetuksi ominaisuudeksi, vaan määrittää sen syntaksin numeroksi:
@property --scale {
syntax: "<number>";
initial-value: 1;
inherits: true;
}Nyt saamme animaation!
Aiot haluta tarkista selaimen tuki koska @property on päässyt vain Chromeen (alkaen version 85) tästä kirjoituksesta lähtien. Ja jos haluat haistaa sen @supports, meillä ei ole tällä hetkellä onnea, koska se ei hyväksy at-sääntöjä arvoina… vielä. Se muuttuu kerran at-rule()siitä tulee todellinen asia.
