السلام عليكم ورحمة الله..

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

لنفرض أن

– لدي لون محدد أريد استخدامه في بعض الأماكن سواء لون النص أو خلفية عنصر معين.
– بدلًا من تكرار نفس كود اللون في عشرين مكان.. فالأفضل أعمله كمتغير واستخدم المتغير, في عشرين مكان.
– عند تغيير اللون في المتغير نفسه, يتغير في جميع الأماكن الأخرى.

مثال:

أولًا: يجب أن تكون المتغيرات داخل ( root )  في ملف الـ CSS بالشكل التالي

أدناه المتغير واسمه
–mainColor

كود اللون هو:
#607098

:root { 

--mainColor: #607098;

}

فقط بهذا الشكل, ثم استخدمه بالشكل التالي في أي مكان أريد.

body {

background-color: var(--mainColor);

}

section { 

color: var(--mainColor);

}

في حال تغيير اللون في المتغير … تلقائيًا سيتغير في جميع الأماكن التي تم استخدامه فيها

وبهذه الطريقة تستطيع تسريع عملك بنسبة كبيرة, بالإضافة للمحافظة على نفس درجة اللون المستخدمة في جميع أجزاء الموقع