CSS Variables: مرونة أكبر في تصميم الواجهات - العدد #38

ما هي متغيرات CSS؟

متغيرات CSS هي طريقة لتخزين القيم (مثل الألوان أو الأحجام) في مكان واحد، ثم إعادة استخدامها في أماكن متعددة داخل ملف CSS.\ تُكتب المتغيرات دائمًا باستخدام بادئة -- (شرطتين)، مثل:

وللاستفادة منها، نستخدم دالة var() بهذا الشكل:

أين نضع المتغيرات؟

لجعل المتغيرات عالمية (متاحة في كل مكان)، نضعها داخل المحدد :root، وهو يشبه المحدد html لكنه يتمتع بأولوية أعلى في التحديد (specificity):

ما الذي يمكن تخزينه في المتغيرات؟

رغم أن الاستخدام الأكثر شيوعًا هو الألوان، إلا أن المتغيرات يمكن أن تحتوي على أي قيمة صالحة في CSS، مثل:

• أحجام (px, em, %)
• مسافات (margin, padding)
• خطوط (font-family)
• حتى قيم أخرى من متغيرات CSS!

مثال:

الوراثة والتدرج (Cascading)

متغيرات CSS تتبع مبدأ الوراثة، أي أنها تنتقل من العنصر الأب إلى الأبناء، ويمكنك إعادة تعريفها في عناصر معينة لتخصيص السلوك.

المرونة في الاستخدام

يمكنك دمج المتغيرات مع كلمات CSS المفتاحية، مثل:

وهذا يمنحك مرونة كبيرة في تعديل التصميم من مكان واحد فقط، دون الحاجة لتكرار القيم.

خلاصة

متغيرات CSS تمنحك:

• تنظيمًا أفضل للكود.
• سهولة في التعديل والتحديث.
• إعادة استخدام القيم في أماكن متعددة.
• مرونة في التخصيص حسب السياق.