استخدام المتغيرات في تصميم واجهات المواقع ( شرح الدالة var في css )

الدالة ()var في css تستخدم لاستدعاء قيمة متغير تم تعريفه مسبقا ، أو تعريفه واستخدام قيمته في نفس الوقت إن لم يكن معرفا من قبل . والمتغيرات في css يمكن الوصول إليها بعد تعريفها من أي مكان في مستند html ، بمعنى يمكنك إنشاء متغيرات بتصريح عام Global يمكن استدعاؤها في كل مكان من المستند ، أو محلية Local تستدعى فقط في المعرف الذي أنشئت فيه ، كما يمكنك تغيير قيمها بالجافاسكريبت أو بدونها كما أثناء استخدام الميديا كويري ، والغاية من ابتكار هذه المتغيرات هو ربح الوقت أثناء تصميم الواجهات حيث يضطر المصممون قديما إلى استخدام النسخ واللصق بكثرة ، في موضوع الألوان كمثال ، يمكن كتابة كود لون معين أكثر من مرة في ملف css ، بينما الآن يكفي وضعه في متغير واستدعاؤه في كل مكان ، وإذا طلب منا تعديله نكتفي بتعديل قيمة المتغير مرة واحدة ويظهر التأثير على الموقع بأكمله في نفس اللحظة.

هذه الدالة مدعومة في كل المتصفحات الحديثة بدءا من الإصدارات الواضحة في الصورة التالية :

تعريف المتغير وصيغة الكتابة 

الدالة var تكتب مع فتح الأقواس كما كل الدوال وداخل الأقواس يكتب إسم المتغير name بالإضافة إلى القيمة value وبينهما فاصلة أجنبية ، إسم المتغير إجباري بينما القيمة اختيارية يمكن الإستغناء عنها في حالة كان المتغير معرفا من قبل ، الإسم يبدأ ب -- وهذا أيضا إجباري ، وهناك طريقتان لتعريف المتغير :

1- كتابة إسم المتغير مع القيمة.

2- كتابة الدالة var مع الإسم والقيمة.

وبعد ذلك يكفي كتابة الدالة var مع الإسم فقط في كل مكان نريد فيه استدعاء المتغير. لاحظ الصورة التالية:

كما ترى داخل root وهو html قمنا بتعريف متغيرين واستدعينا قيمتهما في الديف كلاس header وهذه هي الطريقة السليمة ، بينما في الفقرة p عرفنا المتغير وأخذ قيمة وطبق في نفس الوقت لكل فقرات الموقع.

المتغيرات في الوضع العام والوضع المحلي 

مثل جميع المتغيرات في لغات البرمجة يمكن أن يكون لمتغيرات css وضع عام Global ووضع محلي Local ، المتغير في الوضع العام يمكن استخدام قيمته في كل مكان في مستند html بينما لو كان في الوضع المحلي فلا يمكن استخدام قيمته خارج المكان الذي ينتمي إليه ، فلو لاحظت في الصورة التالية :

المتغيرات التي عرفتها في root هي متغيرات Global ولا مشكلة من استدعائها في كل الصفحة كما استدعيتها في الديف كلاس header بينما المتغيرات التي عرفتها في p فتعتبر Local و تعمدت استدعاءها بشكل خاطئ في الديف مع وضع الهاشتاغ فقط كي أبين لك بأن هذا الكود خاطئ والمفترض ألا أكتبه أصلا لأنه لن ينفذ على أي حال.

تغيير قيمة متغير عام في وضع محلي 

يمكن تغيير قيمة متغير تم تعريفه في الوضع العام بآخر نكتبه بنفس الإسم مع تغيير القيمة في الوضع المحلي كما في الصورة التالية :

في هذا المثال غيرنا قيم المتغير fontSize و fontFamily فقط في الفقرة p بينما في الديف كلاس header سيأخذان القيمتان المحددتان في root .

تغيير قيمة متغير عام في الميديا كويري 

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

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

وسبق لي أن شاركت فيديو على قناتي صممت فيه روابط نافبار بألوان مختلفة باستخدام متغير مع Inline Style يمكنك مشاهدته كتدريب عملي على هذا الدرس ، وهذا هو الفيديو :