التوصية بالدورات

دالة CSS var()

تعريف و استخدام CSS var() الدالة تستخدم لإدراج قيمة متغير CSS.

مثال

مثال 1

أولاً، قم بتعريف متغير عالمي باسم --main-bg-color، ثم استخدمه في جدول الأسلوب. var() إدراج قيمة المتغير:

:root {
  --main-bg-color: coral;
}
#div1 {
  background-color: var(--main-bg-color);
}
#div2 {
  background-color: var(--main-bg-color);
}

جرب بنفسك

مثال 2

استخدام آخر var() مثال على إدراج عدة قيم متغيرات CSS باستخدام الدالة:

:root {
  --main-bg-color: coral;
  --main-txt-color: blue;
  --main-padding: 15px;
}
#div1 {
  background-color: var(--main-bg-color);
  color: var(--main-txt-color);
  padding: var(--main-padding);
}
#div2 {
  background-color: var(--main-bg-color);
  color: var(--main-txt-color);
  padding: var(--main-padding);
}

جرب بنفسك

نحو CSS

var(--الاسم, قيمة)
القيمة الوصف
--الاسم مطلوب. اسم المتغير (يجب أن يبدأ بثلاثة شرطات مائلة).
قيمة اختياري. القيمة الاحتياطية (إذا لم يتم العثور على المتغير).

تفاصيل التقنية

الإصدار: CSS3

دعم المتصفح

الرقم في الجدول يعني إصدار المتصفح الذي يدعم هذه الوظيفة بشكل كامل.

كروم إدج فايرفوكس Safari Opera
49 15 31 9.1 36

الصفحات ذات الصلة

دروس:متغيرات CSS