V CSS lahko naredimo spremenljivke zelo preprosto:
:root {
--scale: 1;
}Lahko jih deklariramo na katerem koli elementu:
.thing {
transform: scale(--scale);
}Še bolje za primer, kot je ta, je uporaba spremenljivke pri uporabniški interakciji, recimo :hover:
:root {
--scale: 1;
}
.thing {
height: 100px;
transform: scale(--scale);
width: 100px;
}
.thing:hover {
--scale: 3;
}Če pa bi to spremenljivko želeli uporabiti v animaciji ... ni.
:root {
--scale: 1;
}
@keyframes scale {
from { --scale: 0; }
to { --scale: 3; }
}
/* Nope! */
.thing {
animation: scale .25s ease-in;
height: 100px;
width: 100px;
}To je zato, ker je spremenljivka prepoznana kot niz in tisto, kar potrebujemo, je število, ki ga je mogoče interpolirati med dve številski vrednosti. Tam se lahko oglasimo @property da ne le registrirate spremenljivko kot lastnost po meri, ampak definirate njeno sintakso kot število:
@property --scale {
syntax: "<number>";
initial-value: 1;
inherits: true;
}Zdaj dobimo animacijo!
Želeli boste preveri podporo brskalnika saj @property je pristal samo v Chromu (začenši v različica 85) od tega pisanja. In če upate, da ga boste povohali s @supports, trenutno nimamo sreče, ker ne sprejema pravil at kot vrednosti ... še. To se bo enkrat spremenilo at-rule()postane prava stvar.
