المتغيرات في CSS: الخصائص المخصصة و var

الدرس 18 من 19 · CSS

لون موقعك الأساسي بنفسجي، وقد كتبته في خمسين مكاناً: الأزرار والروابط والعناوين والإطارات. ثم طلب العميل أن يصير أخضر. هل تبحث عن الخمسين موضعاً واحداً واحداً؟ المتغيرات تحل هذه المشكلة: تكتب القيمة مرة واحدة وتعطيها اسماً، ثم تستخدم الاسم في كل مكان. وعند التغيير تعدّل سطراً واحداً.

تعريف المتغير واستخدامه

المتغير في CSS اسمه الرسمي الخاصية المخصصة (Custom Property). وله قاعدتان:

اسمه يبدأ بشرطتين --.
تقرأ قيمته بالدالة var().

:root {
  --main-color: #5b5bf0;
  --radius: 12px;
}

.btn {
  background: var(--main-color);
  border-radius: var(--radius);
}

a {
  color: var(--main-color);
}

:root محدد يشير إلى أعلى عنصر في الصفحة، أي <html>. ما تعرّفه فيه يراه كل عنصر في الصفحة، ولهذا هو المكان المعتاد للمتغيرات العامة.

تخيّل جهات الاتصال في هاتفك: تحفظ الرقم مرة باسم «أمي»، ثم تتصل بالاسم دائماً. وإذا تغيّر رقمها عدّلته في مكان واحد. المتغير هو هذا الاسم المحفوظ.

لماذا تستخدم المتغيرات؟

تعديل في مكان واحد: غيّر --main-color فيتغير الموقع كله.
أسماء لها معنى: var(--danger) أوضح من #dc2626.
اتساق: كل المسافات والزوايا من قائمة واحدة، فلا تجد زراً بزاوية 10px وآخر بزاوية 11px.

نظام تصميم صغير

المواقع المحترفة تعرّف في أول ملف CSS كل قيمها الأساسية:

:root {
  /* الألوان */
  --color-primary: #5b5bf0;
  --color-text: #141826;
  --color-bg: #ffffff;
  --color-border: #e6e8f0;

  /* المسافات */
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;

  /* الزوايا */
  --radius: 12px;
}

وباقي الملف لا يكتب لوناً ولا رقماً مباشرة، بل يأخذ من هذه القائمة:

.card {
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-text);
}

القيمة الاحتياطية

الدالة var تقبل قيمة ثانية تُستخدم إذا لم يكن المتغير معرّفاً:

.title {
  color: var(--title-color, darkblue);
}

إذا وُجد --title-color استُخدم، وإلا كان اللون darkblue.

نطاق المتغير

المتغير يعيش داخل العنصر الذي عُرّف فيه وأبنائه. وتستطيع أن تعطيه قيمة مختلفة في جزء من الصفحة:

:root {
  --accent: #5b5bf0;
}

.btn {
  background: var(--accent);
}

.danger-zone {
  --accent: crimson;
}

كل زر داخل عنصر كلاسه danger-zone يصير أحمر، وباقي الأزرار بنفسجية. لم نكتب قاعدة جديدة للزر، بل غيّرنا قيمة المتغير في تلك المنطقة فقط.

الوضع الليلي بالمتغيرات

هذا أجمل استخدام للمتغيرات. بدلاً من إعادة كتابة تنسيق كل عنصر للوضع الليلي، غيّر قيم المتغيرات فقط:

:root {
  --color-bg: #ffffff;
  --color-text: #141826;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0f1220;
    --color-text: #eef0f8;
  }
}

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

prefers-color-scheme: dark استعلام وسائط يتحقق: هل اختار المستخدم الوضع الداكن في جهازه؟ إذا نعم تبدلت القيم، وتبعها كل عنصر يستخدم المتغيرات.

المتغيرات مع calc

:root {
  --space: 8px;
}

.box {
  padding: calc(var(--space) * 2);
  margin-bottom: calc(var(--space) * 4);
}

مسافة أساسية واحدة، وكل المسافات الأخرى مضاعفات لها. غيّرها فيتناسب التصميم كله.

جرّب بنفسك

غيّر قيمة --main إلى seagreen وشاهد كم عنصراً تغيّر. ثم غيّر --radius إلى 0 ثم إلى 24px. وأخيراً أضف داخل القاعدة .special متغيراً ثانياً يغيّر --radius لهذه البطاقة وحدها:

جرّب بنفسكCSS

أو اضغط Ctrl + Enter

الناتج

أخطاء شائعة

نسيان var: كتابة color: --main-color لا تعمل. القيمة تُقرأ دائماً بـ var(--main-color).
شرطة واحدة: الاسم يبدأ بشرطتين. -main-color ليس متغيراً.
اختلاف حالة الحروف: --Main و --main متغيران مختلفان.
تعريف المتغير في مكان لا يراه العنصر: المتغير المعرّف داخل .card لا يراه عنصر خارج البطاقة. ضع المتغيرات العامة في :root.
أسماء تصف القيمة لا الوظيفة: --purple يصير اسماً مضللاً يوم يتغير اللون إلى أخضر. --color-primary يبقى صحيحاً.

اختبر نفسك

سؤال

كيف تستخدم المتغير --gap قيمةً للخاصية margin؟

سؤال

لماذا تُعرَّف المتغيرات العامة غالباً داخل :root؟

الخلاصة

المتغير يبدأ بـ --، وتُقرأ قيمته بـ var(--name).
عرّف المتغيرات العامة في :root لتراها الصفحة كلها.
var(--name, قيمة) تعطي قيمة احتياطية.
يمكن تغيير قيمة المتغير داخل عنصر معين، فيتأثر هو وأبناؤه فقط.
الوضع الليلي يُبنى بتبديل قيم المتغيرات داخل prefers-color-scheme: dark.

عن مدرسة البرمجة

مدرسة البرمجة موقع عربي مجاني لتعليم البرمجة من الصفر، بدروس منظمة وأمثلة تجربها بنفسك. هدفنا أن يتعلم كل عربي البرمجة بلغته، خطوة بخطوة.