การสอดแทรกตัวแปร 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;
}

แต่ถ้าเราต้องการใช้ตัวแปรนั้นในแอนิเมชั่น… นาดา

: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;
}

ตอนนี้เราได้แอนิเมชั่นแล้ว!

คุณจะต้องการ ตรวจสอบการสนับสนุนเบราว์เซอร์ ตั้งแต่ @property ลงจอดใน Chrome เท่านั้น (เริ่มต้นใน 85 รุ่น) ตามที่เขียนนี้ และถ้าคุณหวังว่าจะได้ดมกลิ่นด้วย @supportsขณะนี้เราโชคไม่ดีเพราะไม่ยอมรับกฎเกณฑ์เป็นค่า... ที่จะเปลี่ยนไปครั้งเดียว at-rule()กลายเป็นของจริง.