العودة إلى الدورة

الدرس 25: متغيرات CSS (الخصائص المخصصة) - مقدمة

إتقان CSS: من الصفر إلى الاحتراف في 100 درس

25. متغيرات CSS (الخصائص المخصصة) - مقدمة

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

تعريف متغير

يتم تعريف المتغيرات باستخدام بادئة شرطة مزدوجة (--). يتم تعريفها عادةً في الفئة الزائفة :root لتكون متاحة عالمياً في مستندك.

css :root { /* تعريف الألوان */ --primary-color: #007bff; --secondary-color: #6c757d;

/* تعريف المسافات */ --spacing-md: 1rem; --max-width: 1100px; }

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

لاسترداد قيمة متغير، استخدم دالة var().

css h1 { /* استخدام متغير اللون */ color: var(--primary-color); margin-bottom: var(--spacing-md); }

.btn-primary { background-color: var(--primary-color); padding: var(--spacing-md); }

الفوائد

  1. قابلية الصيانة: لتغيير اللون الأساسي لموقعك، تقوم بتغيير القيمة مرة واحدة فقط في :root ، ويتم تحديثها في كل مكان.
  2. السمات (Theming): المتغيرات ضرورية لتنفيذ ميزات مثل الوضع الليلي (Dark Mode).
  3. سهولة القراءة: --primary-color أوضح بكثير من #007bff.