المتغيرات في لغة CSS

تنظيم الشيفرات البرمجية أمر ضروري لسهولة قراءة البرنامج والتعديل عليه، خاصة إذا كان البرنامج كبيرا ومتشعبا. ولهذا الهدف المتعلق بالتنظيم تم مؤخرا ظهور خاصية جديدة في css تمكننا من إنشاء متغيرات على شاكلة المتغيرات التي نستعملها في لغات البرمجة.

معظمنا تعامل ومازال مع معالجات css مثل Sass و Less، ومن ضمن الميزات التي جاءت بها هذه الأدوات هي القدرة على إنشاء متغيرات في الستايل واستعمالها لاحقا في عدة أماكن عوض إعادة نفس الستايل مرات متعددة. هذا جميل ونشكر عليه كثيرا هذه المعالجات التي سهلت وحسنت سير عملنا Workflow قدر المستطاع، ولكنها في النهاية تظل معالجات فقط، بنيت فوق لغة css3 وليست شيفراتها أصلية كلها.

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

إنشاء واستدعاء المتغيرات في CSS

إذا كنت تريد للمتغير أن يكون متاحا لجميع عناصر الصفحة فعليك إنشاؤه في أعلى عنصر وهو <html> ولو قمنا بإنشاء المتغير داخل عنصر آخر فسيكون متاحا فقط لأبناء هذا العنصر 🙂

هنا أنشأنا متغيرا أسميناه body-bg-color وهو كما رأيتم مسبوق بعارضيتين أفقيتين

بعدها سنقوم بإستعمال هذا المتغير داخل العنصر <body> مثلا كلون للخلفية :

اقرأ أيضا :  تدوينة سريعة : كيف أصبح مطور مواقع

نقوم باستدعاء المتغير داخل الدالة var(…)

الآن عند القيام بتجربة هذا المثال سنرى بأن العنصر <body> أخذ لون الخلفية #f1f1f1.

الدالة var تقبل معامل ثاني يتم استعماله عوض المتغيرفي حال حصل خطأ ما في المتغير :

الدعم

المتغيرات في CSS مازالت جديدة، مع ذلك تدعمها معظم المتصفحات (Safari, Chrome, FireFox, Opera) في الإصدارات الحديثة باستثناء مايكروسوفت إيدج وانترنت إكسبلورر كما أنها كذلك ليست مدعومة من طرف الإصدارات القديمة من نظام أندرويد و iOS وللمزيد من المعلومات حول دعم هذه الخاصية يرجى زيارة هذا الرابط.

مشاركة
المادة السابقةالفرق بين ووردبريس وبلوغر
المقالة القادمةمقارنة بين مطور Front-end ومطور Back-end
بدأت الإحتراف في مجال برمجيات الويب منذ عام 2010، وأسعى لنقل خبراتي المتواضعة لإخواني العرب من المحيط إلى الخليج، راجيا من الله أن يجعل عملي هذا في ميزان حسناتي.

5 تعليقات

  1. اعتقد لسه بدرى علشان المبرمجين تبدا تستخدموا فى الكود بسب ضعف الدعم المقدم وخصوصا من المتصفحات القديمة

    • نعم أستاذي أنت محق،
      ولكن كلها عامين أو ثلاثة وتصبح الخاصية مدعومة بشكل كامل
      شكرا على مروركم الطيب

    • بل ستستفيد اخي الكريم خاصة في المشاريع الكبيرة،
      اما if ستجدها في sass في انتظار وضعها في css الأصلي

ترك الرد

Please enter your comment!
Please enter your name here