دليل البدء السريع لمتغيرات CSS (حالات الاستخدام والبناء والأمثلة)

لقد جربت متغيرات CSS لبعض الوقت الآن. إذا لم تكن قد اتصلت بهم بعد ، يمكنك استخدام هذا الدليل المختصر للعثور بسرعة على طريقك والذهاب إلى العمل.

ما هذا

مثال تطبيق بسيط للأزرار ذات النطاق

تسمح لك متغيرات CSS بتحديد القيم القابلة لإعادة الاستخدام في CSS.

ظهرت منذ زمن طويل. في الآونة الأخيرة ، بدأوا في اكتساب شعبية بسبب دعم المتصفح الأوسع.

إذا كنت تستخدم معالج مسبق ، مثل SASS ، فأنت على دراية بالمتغيرات. الآن يمكنك أن تفعل نفس الشيء بدون معالج مسبق.

لماذا تستخدم متغيرات النمط؟

تسمح لنا المتغيرات بالالتزام بمبدأ DRY (لا تكرر نفسك). بفضلهم ، لدينا أيضًا طريقة لإنشاء نقطة مرجعية واحدة للقيم المكررة. إذا كنت تستخدم معالج مسبق ، فعلى الأرجح ، فإن مزايا هذا النهج مألوفة لك بالفعل. في معظم الأحيان ، يتم استخدام هذا لتعيين اللون الأساسي ، والذي يستخدم للعديد من العناصر.


كرر لون الخلفية لعدة محددات

في المقتطف أعلاه ، يمكن أن تكون قيمة #e74c3c متغيرة. إذا قمنا بعمل متغير من هذه القيمة ، نحصل على نقطة واحدة يمكن الرجوع إليها. هذا يقلل من مخاطر الأخطاء ومشاكل النمط ، لأنه يسهل المزيد من الصيانة.


إنشاء نقطة مرجعية باستخدام متغير

في المقتطف الثاني ، أستخدم معالج مسبق لإظهار كيف يمكنك استخدام متغير لقيمة background-color .

لماذا لا تستخدم متغيرات ما قبل المعالجة بدلاً من متغيرات CSS الأصلية؟

سؤال جيد. في معظم الحالات ، ستفضل الالتزام بمتغيرات المعالج الأولي. هذا إذا كنت تستخدمها بالفعل. ولكن يمكنك الاستفادة من كلا النهجين في وقت واحد. يصبح هذا مناسبًا عندما يصبح من الضروري الاستفادة الكاملة من قدرات متغيرات CSS الأصلية. المزيد عن هذا في وقت لاحق.

يجب استخدام متغيرات CSS الأصلية عندما:

1. ليس لديك معالج مسبق أو لا تستخدمه.
2. تريد الاستفادة من متغيرات CSS الأصلية.

الفوائد الرئيسية لمتغيرات CSS الأصلية

في رأيي ، فإن متغيرات CSS الأصلية لها ميزتان كبيرتان.

الأول. يتم تحديثها في وقت التشغيل! يمكن التحكم فيها باستخدام استعلامات الوسائط أو الحالات أو حتى JavaScript. سيقوم المتصفح بتطبيق التغييرات التي تم إجراؤها. هذا يفتح العديد من الاحتمالات.

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

ليست أجمل بناء جملة

دعونا نلقي نظرة على مثال.



ما هو :root الزائفة؟ كل شيء منطقي: إنه محدد زائف لجذر الشجرة. يمكن استخدام محدد :root لتعريف المتغيرات العالمية. في هذه الحالة ، نحدد القيمة --primary للمتغير - --primary .



لتحديد متغير ، يتم استخدام واصلتين كبادئة.



لاستخدام متغير ، نحتاج إلى دالة var .

وماذا يحدث عندما نشير إلى متغير لم يتم تعيين قيمته؟ في هذه الحالة ، يمكنك تعيين القيم الاحتياطية أو القيم الافتراضية. تدعم الدالة var معلمة اختيارية ثانية تقابل القيم الاحتياطية أو القيم الافتراضية.



يحدد هذا المقتطف نمط المصدر لعلامة button . حيثما أمكن ذلك background-color ، يتم استخدام القيمة --btn-color . إذا كان المتغير غير موجود أو لم يتم تعيين القيمة ، --primary القيمة - --primary .

ليست هناك حاجة لاستخدام متغير لعودتنا الاحتياطية. يمكنك أن تأخذ القيمة. ولكن مع المتغيرات سيكون من الأسهل تنفيذ دعم التعليمات البرمجية.

لاحظ أنه لم يتم التصريح عن أنماط لـ button.btn . بدلاً من ذلك ، يتم تحديث القيمة. الآن من المناسب أن تستمر في التسلسل والنطاق.

المتتالية والمجالات

عند العمل مع المتغيرات ، يتم أخذ المتتالية في الاعتبار ، بالإضافة إلى نطاق المتغيرات. في المثال السابق ، يتم التصريح عن المتغيرات في :root pseudo- :root . جميع المتغيرات في :root محدد :root لها نطاق عالمي.

في أحد الأمثلة أعلاه - كان --primary متاحًا لجميع المحددات. بسبب النطاق ، يمكن تجاوز هذه القيمة. على سبيل المثال ، نريد --primary القيمة --primary للفئة premium .



في هذا الجزء ، تكون قيمة المتغير - الأساسي لعنصر من الدرجة premium هي dodgerblue . بمعنى ، إذا لم يتم تطبيق أي فئة على button ، فإن قيمة المتغير تكون قابلة rebeccapurple . ومع ذلك ، إذا قمت بتطبيق الفئة premium ، يتغير اللون إلى dodgerblue .

تجدر الإشارة إلى أنه ، كما هو الحال مع الأنماط المضمنة ، فإن متغيرات CSS المضمنة لها الأولوية القصوى.



في هذا الجزء ، سيتم تعيين لون خلفية الزر إلى red ، على الرغم من حقيقة أنه يتم استخدام الفئة premium هنا. يحدث هذا لأن القيمة --primary موصوفة مباشرة في العلامة.

إدارة القيمة

يمكنك التحكم في قيم متغيرات CSS باستخدام قواعد CSS الأخرى. المناهج الرئيسية هي استعلامات وسائل الإعلام وتغييرات الدولة.

على سبيل المثال ، قد تتغير قيمة متغير عندما يتجاوز عرض الشاشة قيمة معينة.



سيبدأ التغيير في إعادة رسم المتصفح ويظهر النتيجة للمستخدم.

في هذه الحالة ، سيتغير تدرج الخلفية إذا تجاوز العرض 768px .

كيفية إدارة المتغيرات باستخدام الحالات؟ على سبيل المثال ، button . سيتم تحديث متغير CSS بناءً على حالة button .



في هذه الحالة ، يمكنك تخصيص نمط الزر بناءً على الحالة :active .

إدارة القيم باستخدام جافا سكريبت

إدارة المتغيرات من CSS مريحة للغاية. ولكن من أجل السيطرة عليها ، عليك التحكم بها باستخدام JavaScript. لحسن الحظ ، هذا حقيقي.

تتيح setProperty طريقة setProperty تعيين وإدارة متغيرات نمط العنصر.



كيفية تحديث مجموعة المتغيرات في :root pseudo- :root ؟ سؤال جيد. ستحتاج إلى تعيين خصائص documentElement لـ documentElement .



عندما يمكنك معالجة متغيرات CSS بهذه الطريقة ، هناك العديد من الاحتمالات. غريبة عن تتبع موضع المؤشر مع حدث mousemove .

باستخدام calc () والتخلص من الوحدات

حاول عدم استخدام الوحدات في المتغيرات. سيؤدي ذلك إلى تسهيل المزيد من الصيانة.



تتيح لك وظيفة calc() تطبيع القيم وتعيينها بالوحدات المطلوبة.



يمكن استخدام متغيرات CSS لتخزين المعلومات حول الوحدات المفضلة. للتوضيح ، أخذنا "1 بكسل" في الجزء ، ولكن يمكنك استبداله بـ "1pt" ، "1rem" ، إلخ.

عادة ما يكون نقص الوحدات أكثر صلة عندما يتم تعيين القيم من JavaScript. عند معالجة القيم الخالصة ، فإن الملخصات النصية الخاصة بنا تُلخص من CSS تم قطع الاتصال.



عندما يتم تضمين الوحدات في CSS ، تمر الخدمة أيضًا من خلال CSS.

أمثلة التطبيق

ما زلت أدرس أمثلة مختلفة لاستخدام متغيرات CSS. بادئ ذي بدء ، يتبادر إلى الذهن موضوع ديناميكي. يعد تتبع المؤشر والتمرير على الشاشة تطبيقات مثيرة للاهتمام أيضًا. لقد قمت بإعداد مواد تدريبية ، والتي يمكن العثور عليها أدناه.

مثال مع كلب وكرة

فلنعمل مثال واحد معا!



هنا نقوم ببساطة بتتبع موضع المؤشر وتحديث موضع الإيموجيين.



الشيء الرئيسي هنا هو نقل الرموز التعبيرية من نقطة مركزية باستخدام translate وفي نفس الوقت تطبيق transition-delay على الكلب.

كيفية تحديث الوضع؟ استخدام متغيرات --x و - --y .



كيفية جعل الكلب متخلفا؟ يتم تطبيق transition-delay . يمكن أيضًا تحقيق تأثير تباطؤ معقد باستخدام transition-timing-function .



يبقى فقط لتحديث هذه المتغيرات mousemove .



هذا كل شيء. زوجان من التحسينات الطفيفة ، وشيء من هذا القبيل اتضح:

المساوئ

حتى الآن ، سار العمل مع متغيرات CSS بسلاسة تامة. نادرًا ما واجهت حالات لم ينجح فيها شيء. فيما يلي بعض الاحتمالات التي أود رؤيتها لمتغيرات CSS.

1. الرسوم المتحركة للمتغيرات. في هذه المقالة ، لم أتحدث عن الرسوم المتحركة على الإطلاق. يمكنك استخدام المتغيرات لذلك. لكن الرسوم المتحركة للقيم نفسها لا يمكن القيام بها.
2. لا يمكن استخدام متغيرات CSS في المحددات. هذا أمر منطقي ، ولكن سيكون من الرائع إذا كان هذا المستوى من الاستيفاء متاحًا. سيكون استخدام المتغيرات في محدد nth-child رائعًا.

الخلاصة

أحب العمل مع متغيرات CSS. كلما فعلت ذلك ، كلما تتبادر إلى الذهن أمثلة التطبيق.

بفضل هذه المقالة ، يمكنك أن تبدأ بنفسك في تعلم متغيرات CSS.

إذا كنت مهتمًا بالحصول على نظرة عامة أكثر تفصيلاً لمتغيرات CSS ، فراجع هذا الفيديو .

LOOKING.HOUSE - جمع المشروع أكثر من 150 نقطة من الزجاج في 40 دولة. يمكنك تنفيذ أوامر المضيف و ping و traceroute و mtr بسرعة.