في CSS4 جاءت الكثير من المميزات الرائعة وإن ليست مدعودمة بجميع المتصفات ولكن المأكد أنه لن يطول الأمر حتى تصبح الأكثر استعمالا.

في CSS4 أحد أبرز المميزات هي المتغيرات نعم تستطيع تحديد متغيرات كما في الجافا سكربت أو C أو JAVA أو أي لغة برمجة أخرى.

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

والآن بعد ان حددت المكان ينصح بـ :root فقط لتحديد متغير تضع -- قبله وتضع قيمته وتنتهي بفاصلة منقوطة ';' :

:root {
--color : #ccc;
}

لإستدعاء المتغير ببساطة تظعه داخل var(هنا) في المكان الذي تريد:

div {
color: var(--color);
}

ببساطة هذا كل شيء ! 😄

مثال :

:root {
--color : #ccc
}
div {
color: var(--color);
} 

مثال آخر:


أو