css_variables
ابوبكر هلال محمد
منذ عامين تقريباً
4 دقائق للقراءة
763 كلمة
موضوعنا اليوم في css وهتكلم عن css_variables
زي ما عارفين كل لغات البرمجة فيها مفاهيم عامة بتكون ثابتة منها زي مفهوم المتغيرات variable بتلقاهو ثابت في كل لغة برمجة عشان يسهل ليك التعامل مع البيانات بتاعتك وتتخزن فيه ويتيح ليك امكانية التحكم فيه وفي البيانات البداخله وكمان بسهل للغة برضو والمترجم بتاعها.
المهم في الموضوع لو عندك خلفية في لغات البرمجة اكيد مفهوم المتغير بتكون عارفو ما عايز اعمل مقارنة بين لغات البرمجة ولغة css فالcss ليست لغة برمجة ولكن فيها خاصية بتمكنك انك تعمل متغيرات فيها
كيف الكلام ده 😨؟؟
ايوا زي م بقول كده فيها امكانية تنشي متغيرات وتتعامل بيها في التنسيق بتاعك ومدعمة من اغلبية المتصفحات الا حبيبنا اخونا الشديد داك طبعا عارفنو🌚
طيب يا معلم كده ورينا كيف نعمل متغير في الcss. وكيف نستخدمو
طيب عشان تعمل متغير لازم تضيف قبل اسم المتغير اتنين علامة ناقص او double hyphen اللي هي. (--) وده بكون كيف ؟؟
عادي كانك بتكتب خاصية معينة لعنصر معين زي اللون وتديهو قيمتو
كيف كده ورينا
مثال
element{
--main-bg-color:brown;
}
هنا
ال --main-bg-color هو المتغير
الbrown هو قيمة المتغير
لحدي هنا معاي عرفنا كيف نعمل متغير ونديهو قيمة معينة ؟ اوك
طيب هنا لحدي الان المتغير تحت scope معين اللي هو مجال العنصر الختيتو فيهو
طيب عايز تخلي يكون global ويكون عام تقدر تصل ليهو في كل html dom ظابط خلي يكون
علي مستوي الجزر بتاع الصفحه اللي هو الروت root
:root{
--main-bg-color:brown;
}
كده متغيرنا اتنشا فعليا وبقي عام وتقدر تصل ليهو
طيب عايز نستخدمو لحدي الان ما استخدمنا نحن انشانا وختينا فيهو قيمة معينة
عايز تستخدمو فعليا عندنا دالة جاهزة. عشان يعمل implementation (تنفيذ)والقيمة بتاعتنا تاخدها الخاصية المعينة
اسمها var() بنمرر ليها اسم المتغير العملنا ولو جينا لاصل الدالة هي اصلا بتقبل قيمتين اللي هم
var(<property-name>, <value>)بمعني ممكن تنشي المتغير طوالي داخل الدالة var بدل انشاها خارجا او تستخدم الطريقة الاولي تنشي المتغير وتمرره للدالة افضل طريقة
طيب وفقا للطريقة الاول نحن انشانا متغير عايزن ننفذو
طيب
element{
background-color:var(--main-bg-color) ;
}
هنا فعليا نفذنا متغيرنا التم انشائه فوق يبقي لو عايزن نغير لون الخلفية ده م علينا الا نغير قيمة المتغير فوق وهتتغير هنا فعليا وكمان لو استخدمنا متغيرنا ده في اي حته تانية مجرد ما غيرنا قيمتو فوق هتتغير طوالي في كل الحتتات الاستخدمنا فيها المتغير
طيب ده الطريقة الاولي عشان ننشي متغير ونستخدمو طوالي الطريقة التانية هي اننا طوالي نعمل متغير داخل دالة var() اللي هي ف الاصل بتقبل قيمتن الاولي اسم المتغير والتانية قيمة المتغير مثال
element{
background-color:var(--background, blue) ;
}
هنا فعليا نحن انشانا ونفذنا متغيرنا طوالي
لكن ما طريقة مثالية لانو لو احتجت تغير قيمة المتغير هيكون علي مستوي العنصر ده فقط الافضل تعلن عنو فوق ويكون علي مستوي الجزر بتاع الصفحه وتقدر تستخدمو في اي حته.
لحدي. هنا عرفنا كيف نعمل متغير وكيف نستخدمو طيب ي معلم افترض انو انا كتبت قيمة للمتغير ده غلط او ختيتو في قيمة خاصية ما بتناسبو كيف الكلام ده
ناخد مثال
:root{
--main-color:20px;
}
element{
color:var(--main-color) ;
}
هنا البحصل شنو المتصفح لمن يعمل عرض او display للعنصر ده ويجي يلقي تنسيقو اللون بتاعو عامل كده
color:18px;
ونحنا عارفين ماف لون اسمو 18px الهيحصل شنو هنا
قال ليك اطمن ي عمك هنا المتصفح بعمل check يتاكد اول من القيمة لاقها م ياها هيقوم يستخدم القيمة الافتراضية للخاصية default initial
كده ف السليم معروف اي خاصية يكون عندها قيمة افتراضية.
طيب نجي للزيتونة انا قدرت استفيد من الخاصية ده عايز اتحكم فيها عن طريق الجافااسكريت اكتر واكتر واطلع حاجه ظابطة
عندها خطافات ظابطة او سلكتور selector في الجافااسكربت عشان تتحصل قيمة متغير معين استخدم
element.style.getPropertyValue('--your-var') ;
عايز تخت متغير معين علي عنصر معين استخدم
element.style.setProperty('--your-var') ;نقيف لهنا لا لا نديكم زيادة كمان ممكن تستخدم css variable كمان في html inline style. كيف 😨؟؟
مثال
<html style='--color:red;'>
<body {color:var(--color) ;} >
</body>
</html>
طيب نجي لفوائد استخدام المتغيراات في css
- -- اول حاجة بتكون اكثر قابلية للقراءة وسهل اغير قيمة اي حاجه عايزها بالمتغير.
- -- سهل تغير قيم خصائص معينة خصوصا لو مشروعك شوية كبير
- -- بتعرف الخطا سريع لو حصل اي خطا
ملاحظة
طبعا هيجو ناس يقولو لي استخدم الpreprocessors زي الsass البتوفر برضو امكانية كبيرة جدا في المتغيرات والmixin والfunction والحلقات forloop وغيرها
البوست لتوضيح خاصية شوية م معروف للناس فالمتغيراات في الsass عندها طريقة غير الفي css زي مثلا المتغير في الsaa لو عايزن نعرفو نكتب
$main-color:red;
عايزن نستخدمو بنخت نفس تعريفو مثال
element{
color:$main-color;
}
مثال عملي عامل انا في خاصية css variable علي codepen تقدرو تشوفو من هنا
مثال عملي علي codepen #
https://codepen.io/Abobakerhilal/pen/VwLMLZY
المصادر