عارف إني ماتكلمتش عن المتغيرات قبل كدة، ولكن النهاردة هنعرف حاجات بسيطة عنها اللي يخلينا نعرف فايدتهم ونستخدمهم في الـCSS، ولما نبدأ نتكلم عن الـCS (كمبيوتر ساينس) هنتكلم عنها بالتفصيل بإذن الله
المهم، وانت بتصمم موقع غالبًا بيبقى عندك ألوان وFont بيتكرر كتير في الصفحة، وبتحتاج كل مرة تكتبه وتبقى حافظ الكود بتاعه، أو هتضطر تدور عليه وتاخده Copy وتعمله Paste كل شوية
وهنا بيظهر الحل السحري، المتغيرات أو الـVariables
ببساطة انت بتقدر تعرف متغير (Declare) وتسند ليه قيمة (Assign)، والـSyntax بتاعها بسيط زي ما انت شايف في الصورة كدة، عبارة عن شرطتين وبعد كدة اسم المتغير، وقيمته.
وبس كدة، تقدر تستخدم الـVariable ده في أي Child للـParent اللي عرفت فيه المتغير، بمعنى انك لو عرفت المتغير في UL مثلًا، تقدر تستخدمه في أي LI جوة الـUL دي!
طيب يا سيدي، أسمي المتغير ده بقى إزاي؟
– المتغير ماينفعش يبدأ برقم، لازم يبدأ بحرف
– لازم يبقى في شرطتين قبل اسم المتغير
– المتغير ماينفعش يتحط فيه علامات خاصة
بس كدة؟ لأ استنى
لازم برضه تبقى عارف ان اسم المتغير ده حساس للحروف، يعني الـUpper Case غير الـLower Case، والمتغير لازم ياخد قيمة، لو مش حابب تسندله قيمة في الأول ممكن تعوض عنها بمسافة فاضية (Space)، ولكن ماينفعش يبقى قيمته فاضية إطلاقًا
حلو، كدة اتعلمنا ازاي نعرف متغير، نستخدمه ازاي بقى؟
بسيطة، عندنا Function لطيفة في الـCSS اسمها var، ودي بتقبل مني اسم المتغير، وأي قيم بحطها بعد كدة بتبقى عبارة عن Fallback، بحيث لو المتصفح لسبب ما مقدرش يجيب قيمة المتغير ده يستخدم الـFallback
حلو الكلام ده؟ جميل
ايه بقى المتصفحات اللي بتدعم الـCSS Variables؟ كل المتصفحات حرفيًا، ماعدا العاق Internet Explorer، ولكن مش مشكلة حلها بسيط هسيبك تبحث عنه بقى وتقولي في الكومنتات
وبس كدة، صدقني الـCSS Variables من أهم الحاجات اللي هتتعامل معاها وهتسهل عليك شغل كتير، سواء في كتابة الكود أو التعديل عليه بعدين حتى، وكمان لما نخش على الـJavaScript هتلاقي تطبيقات كتير ممكن تعملها، زي الـDark/Light Mode، والـCustom Theme، تغيير حجم الخط وحاجات تانية كتير بقى 😄
وده الموضوع ببساطة.
الجينيص
CSS Notes
الجينيص