المتغيرات في لغة CSS
تنظيم الشيفرات البرمجية أمر ضروري لسهولة قراءة البرنامج والتعديل عليه، خاصة إذا كان البرنامج كبيرا ومتشعبا. ولهذا الهدف المتعلق بالتنظيم تم مؤخرا ظهور خاصية جديدة في css تمكننا من إنشاء متغيرات على شاكلة المتغيرات التي نستعملها في لغات البرمجة.
معظمنا تعامل ومازال مع معالجات css مثل Sass و Less، ومن ضمن الميزات التي جاءت بها هذه الأدوات هي القدرة على إنشاء متغيرات في الستايل واستعمالها لاحقا في عدة أماكن عوض إعادة نفس الستايل مرات متعددة. هذا جميل ونشكر عليه كثيرا هذه المعالجات التي سهلت وحسنت سير عملنا Workflow قدر المستطاع، ولكنها في النهاية تظل معالجات فقط، بنيت فوق لغة css3 وليست شيفراتها أصلية كلها.
مع ظهور نظام المتغيرات في css3 نفسها، أصبح الوضع أفضل وأكثر أصالة، لأنه لن يكون علينا، بعد الدعم الكامل لهذه الإضافة من طرف المتصفحات الكبرى، استعمال المعالجات فقط للإستفادة من ميزة المتغيرات، لأنه سيكون بمقدورنا استعمالها مباشرة في ملفات css. الأصلية.
إنشاء واستدعاء المتغيرات في CSS
إذا كنت تريد للمتغير أن يكون متاحا لجميع عناصر الصفحة فعليك إنشاؤه في أعلى عنصر وهو <html> ولو قمنا بإنشاء المتغير داخل عنصر آخر فسيكون متاحا فقط لأبناء هذا العنصر :)
html {
--body-bg-color: #f1f1f1;
}هنا أنشأنا متغيرا أسميناه body-bg-color وهو كما رأيتم مسبوق بعارضيتين أفقيتين —
بعدها سنقوم بإستعمال هذا المتغير داخل العنصر <body> مثلا كلون للخلفية :
body {
background-color: var(--body-bg-color);
}نقوم باستدعاء المتغير داخل الدالة var(…)
الآن عند القيام بتجربة هذا المثال سنرى بأن العنصر <body> أخذ لون الخلفية #f1f1f1.
الدالة var تقبل معامل ثاني يتم استعماله عوض المتغيرفي حال حصل خطأ ما في المتغير :
body {
background-color: var(--body-bg-color, #f1f1f1);
}الدعم
المتغيرات في CSS مازالت جديدة، مع ذلك تدعمها معظم المتصفحات (Safari, Chrome, FireFox, Opera) في الإصدارات الحديثة باستثناء مايكروسوفت إيدج وانترنت إكسبلورر كما أنها كذلك ليست مدعومة من طرف الإصدارات القديمة من نظام أندرويد و iOS وللمزيد من المعلومات حول دعم هذه الخاصية يرجى زيارة هذا الرابط.
