متغيرات CSS (Custom Properties) تبدأ بشرطتين --، وتُعرَّف غالبًا في :root لتكون متاحة في كل الصفحة:

:root {
  --primary-color: #ff0000;
}

button {
  background: var(--primary-color);
}

نستخدم المتغير بالدالة var().

لماذا هي مفيدة؟

• تغيّر اللون في مكان واحد فيتغير في كل الموقع.
• يمكن تغيير قيمها حسب الحالة، مثل الوضع الداكن:

@media (prefers-color-scheme: dark) {
  :root { --primary-color: #ff6b6b; }
}

ويمكن إعطاء قيمة احتياطية: var(--primary-color, red). أما $primaryColor فهي صيغة Sass، وليست CSS عاديًا.