--custom-properties

متغيرات CSS --custom-properties

المتغيرات المخصصة --name تخزن قيمًا تعاد بـ var()‎ — أساس أنظمة الألوان والثيمات الحية بلا أي معالج مسبق.

ثورة CSS الهادئة: عرّف القيمة مرة (--accent: #7c5cff على :root) واستهلكها بكل مكان var(--accent) — تغيير الهوية كلها يصبح تعديل سطر. وقوتها القاتلة على المعالجات القديمة: **حية في المتصفح وتُورَّث وتُعاد تعريفها بأي نطاق** — نظام الوضع الداكن الحديث كله: نفس أسماء المتغيرات بقيم جديدة تحت .dark، والمكونات لا تتغير حرفًا (نظام هذا الموقع الكامل الذي تقرأ به الآن).

ترافقها var(--x, بديل) بقيمة احتياطية، وcalc للحساب، وcolor-mix لاشتقاق درجات من متغير واحد.

الصياغة

:root {
  --accent: #7c5cff;
  --radius: 12px;
}
.dark { --accent: #a78bfa; }  /* الثيم = قيم جديدة فقط */

.card {
  border-radius: var(--radius);
  border-color: var(--accent);
}

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

🎨 محرّر HTML/CSS

<style>
  .theme { --accent: #7c5cff; padding: 14px; border-radius: 12px; background: #ede9fe; }
  .theme.alt { --accent: #0e7490; background: #e0f4f8; }
  .theme button { background: var(--accent); color: white; border: 0; padding: 10px 20px; border-radius: 8px; font-weight: bold; }
  .theme p { color: var(--accent); margin: 6px 0 0; }
</style>
<div class="theme"><button>زر</button><p>ثيم بنفسجي</p></div>
<div class="theme alt" style="margin-top:8px"><button>زر</button><p>نفس الكود — متغير مختلف</p></div>

النتيجة المباشرة:

أهم القيم

القيمة	الوظيفة
--name: value	التعريف — على :root للعموم أو أي نطاق للتخصيص
var(--name, fallback)	الاستهلاك مع بديل احتياطي
إعادة التعريف بالنطاق	سر الثيمات: .dark يبدّل القيم والمكونات ثابتة
مع calc / color-mix	حسابات واشتقاق درجات من متغير واحد

💡 نصائح عملية

ابدأ كل مشروع بتوكنات: ألوان، أنصاف أقطار، مسافات — على :root
قابلة للتغيير من الجافاسكريبت لحظيًا: setProperty — ثيمات وتفاعلات حية

⚠️ أخطاء شائعة

تكرار نفس اللون الخام بعشرين ملفًا ثم «تغيير الهوية» بالبحث والاستبدال
نسيان أنها تورّث — عرّف بالنطاق الأضيق المناسب لا كل شيء عالميًا

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار CSS الكامل بالعربي.

📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs