مُولِّد متغيرات CSS إنشاء خصائص مخصصة لCSS (متغيرات) للألوان والتباعد والتخطيط.

تُعرَّف متغيرات CSS المخصصة بسابق -- في نطاق محدد (عادةً ما يكون :root للاختيار العالمي): :root { --color-primary: #667eea; }. يتم الوصول إليها باستخدام var(): color: var(--color-primary). تتدفق المتغيرات وتورث مثل خصائص CSS الأخرى - تعريفها في :root يجعلها متاحة في كل مكان. يمكن تجاوزها في أي نطاق محدد، مما يتيح التهيئة: .dark-theme { --color-primary: #90cdf4; }. يمكن للمتغيرات الإشارة إلى متغيرات أخرى: --color-hover: var(--color-primary). لتهيئة الموضوع، حدد جميع المتغيرات في :root وتجاوزها في فئات المواضيع. يمكن لـJavaScript قراءة وضبط المتغيرات: document.documentElement.style.setProperty('--color-primary', '#000'). على عكس متغيرات المُحَوِّل السابق (Sass, Less)، فإن خصائص CSS المخصصة هي ديناميكية ويمكن تغييرها في وقت التشغيل. وهي مدعومة في جميع المستعرضات الحديثة.