شرح Css Variables - المتغيرات في CSS

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

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

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

إذا قمت بتعريف متغير CSS الخاص بك باستخدام root pseudo-class ، فيمكنك استخدام متغير CSS هذا بشكل عام ، ولكن إذا قمت بتحديد متغير CSS لعنصر معين ، فيمكنك استخدام هذا المتغير فقط في رمز نمط العناصر.

تحديد واستخدام متغيرات CSS:

لتحديد متغير CSS ، عليك ببساطة وضع شرطتين (-) قبل اسم المتغير. على سبيل المثال --background: # fc801c.

هنا يمكنك أن ترى بوضوح أن --background متغير وأن كود اللون السداسي hex colourهو قيمة هذا المتغير. إذا رأيت اسم المتغير بوضوح ، فسترى أنني أضفت شرطتين (-) قبل اسم المتغير.

لذا عند استدعاء متغير CSS ، يجب عليك اتباع بعض القواعد واستخدام متغيرات CSS في أي مكان ، يجب عليك إدخال اسم المتغير بشرطات (-) داخل دالة var var ().

تُستخدم هذه الوظيفة لاستدعاء أي متغير في أي مكان في كود نمط CSS. يمكنك الاطلاع أدناه على أمثلة لتعريف المتغيرات واستخدامها في أوراق أنماط CSS.

على سبيل المثال: background: var(--background)

تعيين واستخدام متغير CSS محليًا:

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

تعيين واستخدام متغيرات CSS
محليا لنمط عنصر واحد.
*/
#ID {
  --background: #fc801c; /*    تحديد المتغير ( --background  ) ذات قيمة    */
  background: var(--background); /*    استدعاء المتغير ( var(--background) )    */
}

في مثال الكود أعلاه ، قمت بتعريف متغير --background محليًا ولا يمكن استخدام هذا المتغير في أي رمز نمط عناصر أخرى.

دعنا نلقي نظرة على كيفية تحديد واستخدام المتغيرات بشكل عام

تحديد واستخدام متغيرات CSS بشكل عام:

لاستخدام أي متغير CSS بشكل عام ، يجب عليك تحديد متغيرات CSS الداخلية في: محدد :root pseudo-class في CSS.

المتغيرات المحددة داخل: يمكن استخدام محدد :root pseudo-class في CSS بشكل عام في ستايل أي عنصر. ألق نظرة على المثال أدناه.

تعيين واستخدام متغيرات
/* 
تعيين واستخدام متغيرات CSS
بشكل عام.
 
*/
:root{
    --background: #fc801c;  /* تحديد المتغير */
}
#ID {
  background: var(--background);  /*استدعاء المتغير*/
}
#ID2 {
  background: var(--background);  /*استدعاء المتغير*/
}

الخاتمة:

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

أذا أعجبك هذا النوع من المقالات لا تنسي أن تشاركنا رأيك في التعليقات حتي نقدم المزيد من هذه الشروحات