CSS/var

الدالة var()‎ في CSS تُستخدم لتضمين قيمة خاصية مخصصة بدلًا من قيمة إحدى الخاصيات الأخرى.

var(--header-color, blue);

لا يمكن استخدام الدالة var()‎ في أسماء الخاصيات أو المُحدِّدات أو أي شيء آخر عدا قيم الخاصيات.

أمثلة

المثال الآتي يستعمل قيمة الخاصيات المخصصة عبر الدالة var()‎ مبينًا كيفية تحديد قيم احتياطية:

:root {
  --main-bg-color: pink;
}

body {
  background-color: var(--main-bg-color);
}

.component .header {
  color: var(--header-color, blue);
}

.component .text {
  color: var(--text-color, black);
}

.component {
  --text-color: #080;
}

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	49.0	31.0	غير مدعومة	36	9.3

البنية العامة

أوّل وسيط يُمرَّر إلى الدالة هو اسم الخاصية التي ستوضع قيمتها، أما الوسيط الثاني الاختياري يُمثِّل قيمةً احتياطيةً فلو لم يتمكن المتصفح من الوصول إلى قيمة الخاصية المخصصة أو كانت غير صالحة، فسيستخدم المتصفح القيمة الثانية.

var( <custom-property-name> [, <declaration-value> ]? )

لاحظ أنَّ الوسيط الثاني سيبدأ من بعد أوّل فاصلة وسينتهي بنهاية الدالة، فمثلًا الدالة ‎var‎(--foo, red, blue)‎ تُعرِّف قيمةً احتياطيةً هي red, blue.

مصادر ومواصفات

• مسودة CSS Custom Properties for Cascading Variables Module Level 1.