تُعتبر المتغيرات في CSS من الميزات الحديثة التي أُضيفت لإعطاء المصممين والمطورين المزيد من المرونة والتحكم في تصميم المواقع. تسمح لك المتغيرات في CSS بتحديد قيم قابلة لإعادة الاستخدام للعناصر المختلفة، مما يُسهل عمليات الصيانة والتحديث لتصميم الموقع، ويجعل الشيفرة أكثر تنظيماً. في هذا الدرس، سنستعرض كيفية تعريف المتغيرات في CSS، بالإضافة إلى أمثلة عملية لاستخدامها، مثل تغيير الألوان وتحسين تنسيق الصفحات.
ما هي المتغيرات في CSS؟
المتغيرات في CSS تُستخدم لتخزين القيم التي يمكن استخدامها في أماكن متعددة عبر الشيفرة، سواءً كانت الألوان، الأحجام، المسافات، أو أي قيم أخرى تحتاجها بشكل متكرر في التصميم. يمكن تعريف المتغيرات على مستوى الجذر (root) بحيث تكون متاحة في جميع أنحاء الشيفرة، أو على مستوى محدد لجعلها متاحة داخل عنصر معين فقط.
كيفية تعريف المتغيرات في CSS
يتم تعريف المتغيرات باستخدام الصيغة --اسم-المتغير وتعيين قيمتها. يمكن استخدام :root في CSS لتعريف المتغيرات على مستوى الجذر، وهو ما يجعلها متاحة في جميع أجزاء الملف.
صيغة تعريف المتغيرات في CSS
:root {
--main-color: #3498db;
--secondary-color: #2ecc71;
--font-size-large: 18px;
}في هذا المثال، تم تعريف ثلاثة متغيرات:
--main-colorيمثل اللون الرئيسي.--secondary-colorيمثل اللون الثانوي.--font-size-largeيمثل حجم الخط الكبير.
كيفية استخدام المتغيرات
لإستخدام المتغيرات التي تم تعريفها، نستخدم var()، والتي تأخذ اسم المتغير كقيمة وتُعيد القيمة المعرفة له.
body {
color: var(--main-color);
font-size: var(--font-size-large);
}في هذا المثال، قمنا بتطبيق اللون الرئيسي على النص، وحجم الخط الكبير على نصوص الصفحة.
مثال عملي: استخدام المتغيرات لتغيير الألوان
لنفترض أننا نريد تصميم صفحة ويب بسيطة تحتوي على رأس وتذييل وجسم أساسي، ونريد استخدام المتغيرات لتحديد الألوان الأساسية والثانوية.
:root {
--primary-color: #3498db;
--secondary-color: #2ecc71;
--background-color: #f4f4f9;
--text-color: #333;
}
body {
background-color: var(--background-color);
color: var(--text-color);
font-family: Arial, sans-serif;
}
header {
background-color: var(--primary-color);
color: white;
padding: 20px;
text-align: center;
}
footer {
background-color: var(--secondary-color);
color: white;
padding: 10px;
text-align: center;
}
button {
background-color: var(--primary-color);
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
}
button:hover {
background-color: var(--secondary-color);
}تفسير المثال
- تعريف المتغيرات في
:root: في بداية الملف، قمنا بتحديد المتغيرات للألوان الرئيسية (--primary-color) والثانوية (--secondary-color)، بالإضافة إلى ألوان الخلفية (--background-color) والنص (--text-color). - استخدام المتغيرات في تنسيق العناصر:
- اللون الخلفي للصفحة (
body) تم تحديده باستخدام--background-color. - عناصر الرأس (
header) والتذييل (footer) تستخدم الألوان الرئيسية والثانوية. - الزر يستخدم اللون الأساسي، وعند تمرير الفأرة عليه، يتغير إلى اللون الثانوي، مما يضفي تفاعلاً بسيطًا وأنيقًا.
مميزات استخدام المتغيرات في CSS
تساعد المتغيرات في CSS على تحسين الشيفرة بطرق عديدة:
- سهولة التعديل والصيانة: يمكنك تعديل لون واحد أو قيمة واحدة، وسيتم تطبيق التغيير على جميع العناصر التي تستخدم هذا المتغير.
- التنظيم والوضوح: تجعل المتغيرات الشيفرة أكثر تنظيماً وتوضح الألوان والأحجام الأساسية المستخدمة.
- قابلية إعادة الاستخدام: بدلاً من كتابة نفس القيم مراراً وتكراراً، يمكنك استخدام المتغيرات، مما يُبسط الشيفرة ويساعد في تقليل الأخطاء.
تخصيص المتغيرات حسب العناصر أو الشروط
يمكنك استخدام المتغيرات لجعل الألوان قابلة للتغيير حسب الموضوع أو السمات المختلفة في الموقع، مثل الوضع الليلي. على سبيل المثال:
:root {
--background-color: #ffffff;
--text-color: #333;
}
.dark-theme {
--background-color: #333;
--text-color: #ffffff;
}
body {
background-color: var(--background-color);
color: var(--text-color);
}تطبيق الوضع الليلي باستخدام المتغيرات
في هذا المثال، يمكنك تطبيق dark-theme على body أو أي عنصر آخر لتغيير الألوان إلى الوضع الليلي.
<body class="dark-theme">
<h1>مرحبًا بكم في الموقع</h1>
<p>هذا هو المحتوى الرئيسي للصفحة.</p>
</body>كيف يعمل المثال؟
عند إضافة dark-theme إلى body، سيتم استبدال قيم المتغيرات الأساسية بالقيم الجديدة المحددة في .dark-theme، مما يُغيّر ألوان الخلفية والنص تلقائيًا. هذا الأسلوب يوفر طريقة بسيطة وسهلة لتطبيق تغييرات بصرية كبيرة في الموقع.
متغيرات CSS والاستجابة للشاشات
يمكنك أيضًا استخدام المتغيرات لجعل التصميم أكثر استجابة للشاشات المختلفة. على سبيل المثال، يمكنك تحديد قيم مختلفة للمتغيرات حسب حجم الشاشة.
:root {
--font-size: 16px;
}
@media (min-width: 768px) {
:root {
--font-size: 18px;
}
}
@media (min-width: 1200px) {
:root {
--font-size: 20px;
}
}
body {
font-size: var(--font-size);
}في هذا المثال، حجم الخط يتغير تلقائيًا حسب عرض الشاشة، مما يجعل النص أكثر وضوحًا حسب حجم الشاشة.
خاتمة
تعد المتغيرات في CSS أداة قوية وفعالة تجعل تصميم المواقع أكثر تنظيماً ومرونة. من خلال استخدام المتغيرات، يمكنك تبسيط عمليات الصيانة، تحسين تفاعل المستخدم، وتوفير تجربة تصميمية أفضل وأكثر استجابة.
