دليل المبتدئين لمتغيرات CSS (المعروف أيضًا باسم خصائص CSS المخصصة)

نشرت: 2022-04-10

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

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

جدول المحتويات:

متغيرات CSS في المعالجات #
المتغيرات (خصائص مخصصة) في CSS الأصلي #
لماذا "الخصائص المخصصة"؟ #
أين يتم تعريف متغيرات CSS؟ #
ملاحظات فنية حول CSS Variables #
فهم دالة var() #
استخدام متغيرات CSS مع calc() #
الحيل مع متغيرات CSS #

دليل المبتدئين لمتغيرات #CSS (مع أمثلة عملية) ️

انقر للتغريد

متغيرات CSS في المعالجات الأولية

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

في Sass (أو SCSS) ، تعلن عن المتغيرات على النحو التالي:

 $theme-color: #cccccc; .element1 { border: 1 px solid $theme-color; } .element2 { background-color: $theme-color; }
 لغة الكود: PHP ( php )

لاحظ علامة الدولار ($). السطر الأول هو التصريح عن المتغير وقيمته. الكتلتان التاليتان هما مثالان على المتغيرات المستخدمة لاحقًا في ورقة الأنماط.

تستخدم المتغيرات في Less.js الرمز @ :

 @linkcolor: firebrick; a,.link { color: @linkcolor; }

وفي المتغيرات Stylus تبدو كما يلي:

 font- default = 14 px body font-size font- default
 لغة الكود: جافا سكريبت ( جافا سكريبت )

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

المتغيرات (خصائص مخصصة) في CSS الأصلي

يقودنا هذا إلى متغيرات CSS ، أو الخصائص المخصصة ، كما هي محددة في مواصفات CSS. للإعلان عن متغير في CSS العادي ، ضع واصلتين أمام الاسم المخصص الذي تختاره للمتغير أو الخاصية ، ثم استخدم الدالة var() لوضع هذه القيمة حيثما تريد:

 :root { --main : #030303 ; --accent : #5a5a5a ; } .container { color : var (--main); } .footer { border-color : var (--main); } .sidebar { color : var (--accent); } .module { border-color : var (--accent); }
 لغة الكود: CSS ( css )

في هذا المثال ، قمت بتعريف متغيرين CSS: --main و --accent . ثم استخدمت كل متغير CSS في عنصرين مختلفين ، مما يدل على المرونة التي يفتحونها.

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

لماذا "الخصائص المخصصة"؟

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

لديهم نفس بناء الجملة مثل أي خاصية محددة مسبقًا في CSS ، باستثناء الشرطتين اللتين تظهران أمام اسم الخاصية. تسمح الشرطتان لمؤلفي CSS باستخدام أي معرف متقطع صالح دون خوف من التعارض مع خصائص CSS العادية.

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

على عكس خصائص CSS العادية ، فإن الخصائص المخصصة حساسة لحالة الأحرف. هذا يعني --main-color الأساسي ليس هو نفسه --Main-Color . الأحرف الصالحة المراد تضمينها في اسم الخاصية المخصصة هي الأحرف والأرقام والشرطات السفلية والواصلات.

أين يتم تعريف متغيرات CSS؟

كما ترى في المثال الذي قدمته أعلاه ، سترى غالبًا خصائص CSS المخصصة محددة مباشرة على العنصر الجذر لمستند HTML أو Shadow DOM. يقوم محدد فئة :root الزائف بإنجاز ذلك.

 :root { --main : #030303 ; --accent : #5a5a5a ; }
 لغة الكود: CSS ( css )

لكن متغيرات CSS لا تقتصر على تعريفها فقط على عنصر الجذر وغالبًا ما يكون من المفيد تحديدها في مكان آخر. يتم اختيار :root بشكل شائع لأنه يستهدف دائمًا العنصر العلوي في شجرة DOM (سواء كان المستند الكامل أو الظل DOM).

في معظم الحالات ، ستحصل على نفس النتيجة عن طريق تحديد خصائص مخصصة على عنصر html (وهو العنصر الجذر في مستندات HTML) أو حتى عنصر النص body . يسمح استخدام :root بأن تكون الشفرة أكثر إثباتًا للمستقبل (على سبيل المثال ، إذا أضافت المواصفات يومًا ما عنصرًا جديدًا كجذر ، فإن CSS ستبقى كما هي) وأفترض أيضًا أن تسمح لتطبيق ورقة أنماط على نوع مختلف من المستندات التي له عنصر جذر مختلف.

على سبيل المثال ، ستحد التعليمة البرمجية التالية من .sidebar المخصصة للاستخدام في عنصر شريط جانبي فقط:

 .sidebar { --main : #030303 ; --accent : #5a5a5a ; }
 لغة الكود: CSS ( css )

لأغراض العرض التوضيحي ، سترى غالبًا متغيرات محددة على :root ، ولكن يمكنك استخدامها في أي مكان عملي. في الواقع ، يوصي العديد من المطورين بوضعها في مستوى أدنى في شجرة DOM للوحدات النمطية الأصغر أثناء التطوير الأولي ، ثم العمل في طريقك نحو :root أثناء إنشاء قيم أكبر في النطاق.

ملاحظات فنية حول متغيرات CSS

بالإضافة إلى القدرة على التطبيق على أي عنصر ، فإن CSS Variables مرنة إلى حد ما وسهلة التعامل معها.

فيما يلي بعض الأشياء الجديرة بالملاحظة:

يتم حلها من خلال قواعد وراثة CSS العادية والتتالي
يمكنك استخدامها في استعلامات الوسائط والقواعد الشرطية الأخرى
يمكنك تحديدها في سمة style العنصر
يمكن قراءتها أو ضبطها باستخدام ميزات نموذج كائن CSS.

من الملاحظ أيضًا أنه يمكنك دمج متغيرات CSS بشكل أساسي. لاحظ المثال التالي:

 :root { --main-color : lightblue; --new-color : var (--main-color); } body { background : var (--new-color); }
 لغة الكود: CSS ( css )

لاحظ أنني قمت بتعريف متغير --main-color ثم أستخدم نفس اسم المتغير كقيمة لمتغير CSS التالي.

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

 :root { --main-color : lightblue !important ; --main-color : orange; } body { background : var (--main-color); }
 لغة الكود: CSS ( css )

في المثال أعلاه ، سيكون لون الخلفية "أزرق فاتح" ، على الرغم من أن اللون البرتقالي يظهر لاحقًا في تعريفات المتغيرات. لكن القيمة الخلفية نفسها على عنصر body لن يكون لها أي أهمية.

يمكن أن تحتوي متغيرات CSS أيضًا على قيم الكلمات الرئيسية على مستوى CSS مثل initial ، inherit ، وغير unset ، لكن الخاصية all لا تؤثر على متغيرات CSS (على سبيل المثال ، لم يتم إعادة تعيينها).

فهم وظيفة `var()`

لقد رأيت بالفعل وظيفة var() المستخدمة في بعض الأمثلة النموذجية في هذا البرنامج التعليمي CSS Variables. ولكن هناك ما هو أكثر من var() مما غطيته حتى الآن.

أولاً ، الدالة var() صالحة فقط في القيمة ؛ لا يمكن لاسم الخاصية أو المحدد استخدام متغير CSS. أيضًا ، لا يمكن لقيمة استعلام الوسائط استخدام متغير CSS (مثل @media (max-width: var(--my-var)) غير صالح).

تأخذ الدالة var() وسيطين:

اسم الخاصية المخصصة المراد تضمينها
قيمة احتياطية في حالة عدم صلاحية الخاصية المخصصة

فيما يلي مثال حيث يتم تفعيل الوسيطة الثانية:

 :root { --main-colour : lightgreen; } body { background : var (--main-color, #ccc); }
 لغة الكود: CSS ( css )

لاحظ في الكود أعلاه ، لقد قمت بتهجئة اسم المتغير الأولي باستخدام الكلمة البريطانية أو الكندية "color" ولكن عندما استخدمت المتغير قمت بدمج التهجئة الأمريكية "color". هذا يجعل المتغير غير صالح تقنيًا وبالتالي تصبح الخلفية الرمادية ( #ccc ) سارية بدلاً من ذلك.

لاحظ أيضًا أن القيمة الاحتياطية يمكن أن تحتوي على فاصلات خاصة بها. لذلك على سبيل المثال ، إذا كان احتياطك عبارة عن حزمة خطوط ، فستكون هذه طريقة صالحة لتعريفها:

 :root { --main-font : Helvetica, Arial, sans-serif; } body { font-family : var (--main-type, "Courier New" , Consolas, monospace); }
 لغة الكود: CSS ( css )

لاحظ مرة أخرى أن المتغير الخاص بي به خلل ، حيث يعلن عن نوع غير معروف --main-type الرئيسي بدلاً من --main-font . يؤدي هذا إلى تشغيل القيمة الاحتياطية ، وهي مجموعة خطوط بديلة. وبالتالي ، فإن كل شيء بعد الفاصلة الأولى (حتى بما في ذلك أي فاصلات أخرى) هو القيمة الاحتياطية.

استخدام متغيرات CSS للجزئيات

عند تحديد متغير CSS ، لا يجب أن تكون القيمة التي يحملها قيمة CSS صالحة في حد ذاتها ؛ يمكن أن تكون قيمة جزئية يمكن استخدامها كجزء من قيمة كاملة.

على سبيل المثال ، يمكنك تقسيم مجموعة خطوط:

 :root { --main-font : "Franklin Gothic" ; --fallback-font : Gill Sans; --generic-font : sans-serif; } body { font-family : var (--main-font), var (--fallback-font), var (--generic-font); }
 لغة الكود: CSS ( css )

في هذه الحالة ، تعمل كل من القيم المتغيرة من تلقاء نفسها ، لكنها توضح النقطة. لنجرب مثالًا أكثر اختراعًا باستخدام تدوين اللون rgba() :

 :root { --rgba-red : 25 ; --rgba-green : 50 ; --rgba-blue : 105 ; --rgba-opacity : 0.4 ; } body { background : rgba (var(--rgba-red), var (--rgba-green), var (--rgba-blue), var (--rgba-opacity)); }
 لغة الكود: CSS ( css )

يمكنك معرفة مدى فائدة ذلك ، مما يسمح لك "ببناء" القيم بشكل ديناميكي.

استخدام متغيرات CSS مع `calc()`

إحدى الطرق المفيدة لدمج متغيرات CSS في مشاريعك هي بالاشتراك مع وظيفة calc() . كما تعلم ، تتيح لك calc() إجراء عمليات حسابية ضمن قيمة. لذا يمكنك القيام بشيء مثل هذا:

 .element { width : calc ( 100% - 100px ); }
 لغة الكود: CSS ( css )

تتيح لك خصائص CSS المخصصة الانتقال إلى calc() إلى المستوى التالي ، على سبيل المثال باستخدام الأحجام المحددة مسبقًا. وصف أحمد شديد شيئًا مشابهًا وهذا مثال:

 :root { --size : 240 ; } .module { width : calc (var(--size) * 1px ); } .module-small { --size : 360 ; } .module-medium { --size : 720 ; } .module-large { --size : 1080 ; }
 لغة الكود: CSS ( css )

مع وجود هذا في مكانه ، يمكنني استخدام مجموعات القواعد .module و .module .module-* داخل استعلامات الوسائط ، مما يسمح لي بعرض هذه الأنماط بشكل مشروط لأحجام منفذ عرض معينة أو ميزات وسائط أخرى. ستحتوي الوحدات الصغيرة / المتوسطة / الكبيرة على نفس الفئات مثل الوحدة الأساسية ولكن يتم الكتابة فوق حجم الوحدة فقط حسب الحاجة. في المثال أعلاه ، تعمل القيمة 240 الأولية للحجم كنوع افتراضي ولكن يمكنني أيضًا تمرير 240px كوسيطة ثانية في var() للعمل كبديل.

الحيل مع متغيرات CSS

شارك العديد من المطورين النصائح والحيل باستخدام CSS Variables على مر السنين. لن أتوسع في التفاصيل هنا نظرًا لأن هذا هو برنامج تعليمي للمبتدئين بشكل أساسي ، ولكن إليك ملخص سريع لبعضها:

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

إذهب إلى الأعلى

خاتمة

متغيرات CSS ، أو خصائص CSS المخصصة ، جاهزة للاستخدام اليوم مع أكثر من 90٪ من المتصفحات قيد الاستخدام عالميًا التي تدعم هذه الميزة المفيدة. آمل أن تشجعك هذه المناقشة حول الأساسيات وبناء الجملة على التفكير في متغيرات CSS في أحدث مشروعاتك ، إذا لم تكن قد قمت بذلك بالفعل.

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

الآن بعد أن انتهيت من استخدام متغيرات CSS ، تحقق من بعض أدلةنا الأخرى:

تخطيط شبكة CSS
مقدمة إلى Parcel.js
البرنامج التعليمي CSS flexbox
حزمة الويب للمبتدئين
دروس تفاعلات دقيقة للمطورين المبتدئين

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

كل ما تريد معرفته عن متغيرات #CSS (مع أمثلة عملية) ️