CSS Overriding Variables تجاوز المتغيرات

CSS - تجاوز المتغيرات (Overriding Variables)

🔸 تُستخدم ميزة تجاوز المتغيرات (Overriding) لتغيير قيمة متغير CSS في نطاق محدد (عنصر معين أو داخل مكون معين)، بدلًا من استخدام القيمة العامة المعرفة في :root.

---

🔹 1. المتغيرات العامة في :root

:root {
  --main-color: blue;
}

📌 هذه القيمة ستُستخدم بشكل افتراضي في جميع أنحاء الصفحة.

---

🔹 2. تجاوز المتغير داخل عنصر معين

.box {
  --main-color: red;
}

📌 داخل العنصر .box (وأطفاله فقط)، ستُستخدم قيمة red بدل blue.

---

🧪 مثال عملي على التجاوز

<style>
:root {
  --main-color: blue;
}

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

.container {
  --main-color: green;
}
</style>

<p>هذا النص باللون الأزرق (من :root)</p>

<div class="container">
  <p>هذا النص باللون الأخضر (تم تجاوزه داخل container)</p>
</div>

---

📌 تذكير مهم

• يمكنك تعريف نفس المتغير بعدة أماكن، والقيمة الأقرب للعنصر (في التسلسل الهرمي) هي التي تُطبَّق.
• المتغيرات لا ترث (inherit) بشكل كامل خارج العناصر، بل تتأثر بالنطاق (Scope).
• تجاوز المتغير لا يُغير القيمة الأصلية في :root، بل يُعيد تعريفه محليًا فقط.