CSS Variables المتغيرات

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

🔸 تسمح لك المتغيرات في CSS بتخزين القيم (مثل الألوان أو الأحجام) في مكان مركزي، ومن ثم إعادة استخدامها في أي مكان ضمن الملف. هذا يُسهل التعديلات لاحقًا ويحسّن قابلية الصيانة.

---

🔹 تعريف المتغير

يتم تعريف المتغيرات داخل محدد :root لجعلها متاحة في جميع أجزاء الصفحة.

:root {
  --main-color: #3498db;
  --padding: 20px;
  --font-size: 18px;
}

---

🔹 استخدام المتغير

لاستخدام المتغير، نستعمل الدالة var():

.box {
  background-color: var(--main-color);
  padding: var(--padding);
  font-size: var(--font-size);
}

---

🔹 يمكن تعريف متغير داخل عنصر معين فقط

.container {
  --box-color: green;
}

.box {
  background-color: var(--box-color);
}

📌 في هذه الحالة، المتغير --box-color متاح فقط داخل .container وكل عناصره الفرعية.

---

🔹 تعيين قيمة افتراضية للمتغير

.box {
  background-color: var(--unknown-color, pink);
}

📌 إذا لم يكن المتغير --unknown-color معرفًا، سيتم استخدام pink كقيمة بديلة.

---

🧪 مثال عملي كامل

<style>
:root {
  --main-bg: #f9f9f9;
  --main-color: #333;
  --radius: 10px;
}

.card {
  background-color: var(--main-bg);
  color: var(--main-color);
  border-radius: var(--radius);
  padding: 15px;
  box-shadow: 0 0 10px #ccc;
}
</style>

<div class="card">
  هذا صندوق يستخدم متغيرات CSS
</div>

---

📌 ملاحظات هامة

• المتغيرات في CSS لا تعمل داخل ملفات media queries أو @keyframes القديمة بدون دعم المتصفح المناسب.
• يمكنك تغيير قيمة المتغير باستخدام JavaScript في وقت التشغيل.
• كل المتغيرات تبدأ بـ -- ويُفضل تعريفها في :root.