درون یابی متغیرهای 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;
}

اما اگر بخواهیم از آن متغیر در یک انیمیشن استفاده کنیم… 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;
}

حالا انیمیشن را می گیریم!

شما قصد دارید که بخواهید پشتیبانی مرورگر را بررسی کنید پس از @property فقط در کروم (شروع در 85 نسخه) تا لحظه نگارش این مقاله. و اگر امیدوارید آن را بو کنید @supports، ما در حال حاضر بد شانس هستیم زیرا قوانین at-قوانین را به عنوان ارزش نمی پذیرد... هنوز. این یک بار تغییر می کند at-rule()تبدیل به یک چیز واقعی می شود.