متغيرات CSS

متغيرات CSS

دالة var() تستخدم لضمان قيم متغيرات CSS.

يمكن للمتغيرات في CSS الوصول إلى DOM، مما يعني أنك يمكنك إنشاء متغيرات ذات نطاق محلي أو عالمي، وتعديل المتغيرات باستخدام JavaScript، وتعديل المتغيرات بناءً على الاستعلامات الإعلامية.

من أفضل الطرق لاستخدام متغيرات CSS هي التعامل مع ألوان التصميم. يمكنك وضعها في المتغيرات دون الحاجة إلى نسخ ولصق نفس الألوان مراراً وتكراراً.

الطريقة التقليدية

النموذج التالي يوضح كيفية تعريف بعض الألوان بالطريقة التقليدية (من خلال تعريف لكل عنصر معين اللون المستخدم):

مثال

body { background-color: #1e90ff; }
h2 { border-bottom: 2px solid #1e90ff; }
.container {
  color: #1e90ff;
  background-color: #ffffff;
  padding: 15px;
}
button {
  background-color: #ffffff;
  color: #1e90ff;
  border: 1px solid #1e90ff;
  padding: 5px;
}

تجربة شخصية

جملة دالة var()

دالة var() تستخدم لضمان قيم متغيرات CSS.

جملة دالة var() كالتالي:

var(اسم, قيمة)
القيمة الوصف
اسم مطلوب. اسم المتغير (يبدأ بثلاثة شرطين).
قيمة اختياري. القيمة الافتراضية (استخدامها عند عدم العثور على المتغير).

ملاحظة:اسم المتغير يجب أن يبدأ بثلاثة شرطين (--) ويكون حساساً للكتابة!

كيف يعمل var()

أولاً: يمكن للمتغيرات في CSS أن تكون عالمية أو محلية.

المتغيرات العالمية يمكن الوصول إليها/استخدامها في جميع أنحاء المستند، بينما يمكن استخدام المتغيرات المحلية فقط داخل selector تم تعريفها.

إذا كنت ترغب في إنشاء متغيرات ذات نطاق عالمي، فأعلنها في selector :root. selector :root يطابق عنصر الجذر في المستند.

إذا كنت ترغب في إنشاء متغيرات ذات نطاق محلي، فأعلنها في الم selectors التي ستستخدمها.

النموذج التالي هو نفس النموذج السابق، ولكن هنا نستخدم دالة var().

أولاً، نعلن عن متغيرين عالميين (--blue و --white). ثم، نستخدم دالة var() ل插入 قيم المتغيرات لاحقاً في جدول الأسلوب:

مثال

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}
body { background-color: var(--blue); }
h2 { border-bottom: 2px solid var(--blue); }
.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}
button {
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

تجربة شخصية

استخدام var() لديه المزايا التالية:

  • جعل الكود أكثر سهولة في القراءة (فهم)
  • جعل تعديل قيم الألوان أسهل

إذا كنت ترغب في تغيير الألوان إلى ألوان أكثر برودة من الأزرق والأبيض، فأنت بحاجة فقط إلى تعديل قيمي الاثنين من المتغيرات:

مثال

:root {
  --blue: #6495ed;
  --white: #faf0e6;
}
body { background-color: var(--blue); }
h2 { border-bottom: 2px solid var(--blue); }
.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}
button {
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

تجربة شخصية

دعم المتصفح

الرقم في الجدول يشير إلى إصدار المتصفح الذي يدعم هذا الخصائص بشكل كامل.

الوظيفة
var() 49.0 15.0 31.0 9.1 36.0

وظيفة var() CSS

الوظيفة الوصف
var() إدراج قيمة المتغير CSS