المتغيرات المغلق وكيفية استخدامها

الكثير من الناس لا يعرفون متغيرات CSS ، وقد تكون أحدهم! حان الوقت للتعرف على متغيرات CSS وكيف يمكنك استخدامها.

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

إعلان والاستخدام

إليك كيفية الإعلان عن خاصية مخصصة:

جزء {
 - خلفية الأرض: # f00 ؛
}

هنا ، يمكن أن يكون العنصر محددًا لأي عنصر ، على سبيل المثال ، div ، p ، .test ، إلخ ...

ما فعلناه هو أننا أعلنا خاصية مخصصة لهذا العنصر تسمى - background-color. يجب أن تبدأ جميع خصائص CSS المخصصة بـ -.

الآن ، يمكننا استخدام هذه الخاصية المخصصة داخل العنصر باستخدام دالة var.

جزء {
  لون الخلفية: var (- لون الخلفية) ؛
}

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

هذا جميل وكل شيء ، ولكن عادة ما يكون لدينا تكرار داخل عناصر مختلفة ، وليس عنصرًا واحدًا فقط. التصريح عن متغير مخصص داخل نوع عنصر واحد ليس ملائمًا للغاية.

من أجل استخدام خاصية مخصصة داخل أكثر من نوع عنصر ، يمكننا إعلان الخاصية المخصصة داخل الفئة الجذر الزائفة.

:جذر {
  - اللون الرئيسي: # 333 ؛
}

الآن ، يمكننا استخدام المتغير - اللون الأساسي داخل أي عنصر في وثيقتنا:

div {
  اللون: فار (- اللون الأساسي) ؛
}
ع
  لون الخلفية: var (- لون أساسي) ؛
}
.مولع ب {
  لون الحدود: var (- اللون الأساسي) ؛
}

بإعلان الخاصية المخصصة الخاصة بنا بداخل: root ، أصبحنا قادرين الآن على استخدامها داخل div لتعيين لون النص ، p لتعيين لون الخلفية ، وأي عنصر له طابع فئة لتعيين لون الحدود. وبهذه الطريقة ، لم نقم فقط بتقليل التكرار إلى الحد الأدنى ، ولكن سهّلنا أيضًا تعديل وتغيير اللون الأساسي لموقعنا الإلكتروني في أي وقت.

ميراث

يمكن أن ترث العناصر أيضًا خصائص مخصصة. على سبيل المثال ، دعنا نقول أن لدينا HTML التالي:

  
  

بعد ذلك ، نعلن عن متغير يسمى --text-size on .parent:

.الأبوين {
  - حجم النص: 15 بكسل ؛
}

الآن ، يمكننا استخدام - حجم النص ليس فقط داخل .parent ، ولكن أيضًا داخل أطفاله أيضًا:

.الطفل الأول
  حجم الخط: var (- حجم النص) ؛
}

يمكننا أيضا تجاوز الخصائص المخصصة. يمكننا القيام بذلك عن طريق إعادة تعريف الخاصية المخصصة داخل العنصر الفرعي:

.الطفل الثاني {
  - حجم النص: 30 بكسل ؛
}

الآن ، إذا كنت تستخدم - text-size inside .second-child ، فسيتم تقييمه إلى 30px ، ولكن إذا كنت تستخدمه داخل .first-child أو .parent ، فسيظل 15px.

القيم الاحتياطية

يمكنك أيضًا تحديد قيمة احتياطية لمتغير بتمرير معلمة ثانية إلى var. فمثلا:

.الطفل الثاني {
  حجم الخط: var (- حجم النص ، 30 بكسل) ؛
}

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

خاتمة

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