CSS: متغيرات CSS

آخر تحديث: 2026-10-13

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

1. تعريف المتغيرات

متغيرات CSS تستخدم أسماء خصائص مخصصة (تبدأ بـ--):

▶ مثال

2. استخدام المتغيرات

استشهد بالمتغيرات باستخدام دالة var():

▶ مثال

3. نطاق المتغيرات

نطاق متغيرات CSS يُحدد بمكان تعريفها:

متغيرات عامة — مُعرفة في :root:

▶ مثال

متغيرات محلية — مُعرفة في مُحدد محدد، تعمل فقط في ذلك المُحدد وأبنائه:

▶ مثال

4. توريث المتغيرات

متغيرات CSS تتوارث مثل خصائص CSS العادية:

▶ مثال

5. قيم احتياطية لـ var()

var() يمكنها تعيين معلمة ثانية كقيمة احتياطية — تُستخدم عندما يكون المتغير غير مُعرَّف:

▶ مثال

6. تعديل المتغيرات بـ JavaScript

ميزة رئيسية لمتغيرات CSS هي أنه يمكن تعديلها ديناميكياً عبر JavaScript:

▶ مثال

7. تنفيذ تبديل السمة

متغيرات CSS هي أفضل طريقة لتنفيذ تبديل السمة مثل "الوضع الداكن":

▶ مثال

ثم قم بتبديل السمات عبر JavaScript:

document.documentElement.setAttribute('data-theme', 'dark');
// أو
document.documentElement.setAttribute('data-theme', 'light');

8. مزايا متغيرات CSS

1. تقليل الكود المتكرر: متغير واحد يُستخدم في أماكن كثيرة، غيّره مرة واحدة لتحديث الكل
2. قابل للتعديل في وقت التشغيل: يمكن تغييره ديناميكياً عبر JS لتبديل السمة
3. التحكم في النطاق: يمكن تجاوز قيم المتغيرات في حاويات محددة
4. دلالي: --primary-color أسهل في الفهم من #3498db

9. الاختلافات عن المعالجات المسبقة

متغيرات CSS (الخصائص المخصصة) تختلف عن متغيرات Sass/Less:

❓ أسئلة شائعة

📖 ملخص

• متغيرات CSS هي أدوات مهمة جداً في تطوير CSS الحديث
• تُحدد بـ --اسم-المتغير، وتُستخدم بـ var()، تجعل كود النمط أنظف وأسهل في الصيانة
• أكبر قيمة: غيّر قيمة واحدة، وجميع الأماكن التي تشير إلى ذلك المتغير تتحدث تلقائياً
• تبديل السمة، مخططات ألوان متجاوبة، لغة تصميم موحدة — متغيرات CSS مفيدة بشكل خاص في المشاريع الكبيرة

📝 تمارين

1. أنشئ صفحة باستخدام متغيرات CSS لتعريف 5 متغيرات على الأقل لألوان المواضيع وألوان النص والمسافات وغيرها، واستخدمها في جميع أنحاء الصفحة.
2. بناءً على الصفحة أعلاه، نفّذ "تبديل لون السمة بنقرة واحدة" — عدّل متغير اللون الأساسي في :root وراقب التغييرات في جميع العناصر ذات الصلة.
3. استخدم متغيرات CSS لتنفيذ تبديل بسيط بين "الوضع النهاري/الليلي" (بتبديل الفئة أو سمة data-theme عبر JS).
4. تجاوز محلياً قيم متغيرات CSS في حاوية (مثل مكوّن البطاقة) وراقب تغييرات النمط في العناصر الابنة.

فريق Web-Tutorial التقني

منصة دروس برمجية يديرها عدة مطورين. كل درس يتم كتابته ومراجعته بواسطة مطورين متخصصين في المجال. نعمل على ضمان دقة وموثوقية المحتوى — إذا لاحظت أي مشكلة، فيرجى إخبارنا.

من نحن