المتغيّرات (CSS Variables)

ما هي متغيّرات CSS؟

قيم قابلة لإعادة الاستخدام تُعرّفها مرة وتستخدمها في أي مكان. تُعرف أيضًا بـ الخصائص المخصّصة (Custom Properties). تحلّ مشكلة تكرار نفس اللون أو القيمة في عشرات الأماكن.

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

تُعرّف باسم يبدأ بشرطتين --، وتُستدعى بالدالة var():

:root {
  --brand-purple: #b026ff;
  --brand-cyan: #00f5ff;
  --spacing: 16px;
}

.btn {
  background: var(--brand-purple);
  padding: var(--spacing);
}

.link {
  color: var(--brand-purple);   /* نفس اللون، مصدر واحد */
}

🔑 :root يمثّل جذر المستند (<html>)، فتعريف المتغيّرات فيه يجعلها عامّة متاحة لكل الصفحة.

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

.box {
  color: var(--text-color, black);  /* black إن لم يُعرَّف المتغيّر */
}

أين تتألّق المتغيّرات؟ الوضع الداكن (Dark Mode)

غيّر متغيّرًا واحدًا، فيتغيّر الموقع كله:

:root {
  --bg: white;
  --text: black;
}

.dark {
  --bg: #07060a;
  --text: white;
}

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

بمجرّد إضافة الصنف dark على <body>، تنقلب كل الألوان! (هذه بالضبط فكرة الوضع الداكن في المواقع الحديثة.)

المتغيّرات تُورَّث وتتأثّر بالنطاق

.card {
  --padding: 20px;   /* متاح داخل .card وأبنائه فقط */
  padding: var(--padding);
}

المتغيّرات وJavaScript

يمكن قراءتها وتغييرها برمجيًا (ميزة قوية):

document.documentElement.style.setProperty('--brand-purple', '#ff0000');

الأخطاء الشائعة

❌ نسيان var() → color: --brand-purple; خطأ، الصحيح var(--brand-purple).
❌ تعريف متغيّر في نطاق ضيّق ثم استخدامه خارجه → لن يعمل.
❌ نسيان الشرطتين -- في الاسم.

خلاصة

متغيّرات CSS (--name + var()) تجعل قيمك مركزية وقابلة لإعادة الاستخدام، وتُسهّل الصيانة والوضع الداكن بشكل خاص. عرّفها في :root للعمومية.