Saame CSS-is muutujaid üsna lihtsalt teha:
:root {
--scale: 1;
}Ja me saame need deklareerida mis tahes elemendil:
.thing {
transform: scale(--scale);
}Sellise näite puhul on veelgi parem muutuja rakendamine näiteks kasutaja interaktsioonile :hover:
:root {
--scale: 1;
}
.thing {
height: 100px;
transform: scale(--scale);
width: 100px;
}
.thing:hover {
--scale: 3;
}Aga kui me tahaksime seda muutujat animatsioonis kasutada... nada.
:root {
--scale: 1;
}
@keyframes scale {
from { --scale: 0; }
to { --scale: 3; }
}
/* Nope! */
.thing {
animation: scale .25s ease-in;
height: 100px;
width: 100px;
}Selle põhjuseks on asjaolu, et muutuja tuvastatakse stringina ja vajame arvu, mida saab interpoleerida kahe arvväärtuse vahele. Sinna saame helistada @property muutuja mitte ainult kohandatud atribuudina registreerimiseks, vaid ka selle süntaksi määramiseks numbrina:
@property --scale {
syntax: "<number>";
initial-value: 1;
inherits: true;
}Nüüd saame animatsiooni!
Sa hakkad tahtma kontrollige brauseri tuge alates @property on sattunud ainult Chrome'i (alates versioon 85) selle kirjutamise seisuga. Ja kui sa loodad seda nuusutada @supports, meil pole praegu õnne, sest see ei aktsepteeri at-reegleid väärtustena… veel. Ükskord see muutub at-rule()muutub tõeliseks asjaks.
