**CSS Custom Properties** (المتغيرات) هي قيم قابلة لإعادة الاستخدام تُعرَّف بشرطتين (`--`) وتُستخدم بـ `var()`.
**تعريف متغير:** `--اسم-المتغير: قيمة;`
**استخدام متغير:** `property: var(--اسم-المتغير);` `property: var(--اسم-المتغير, قيمة-احتياطية);`
**النطاق (Scope):** المتغيرات ترثها العناصر الأبناء. تعريفها على `:root` يجعلها عامة.
**الفوائد:** 1. مركزية القيم — تغيير مكان واحد يؤثر في كل الصفحة. 2. دعم الوراثة — تختلف قيمتها حسب موقع العنصر في DOM. 3. يمكن تغييرها بـ JavaScript. 4. أساس لنظام الثيمات (Dark Mode).
**الفرق عن متغيرات Sass/Less:** CSS Variables حية في المتصفح — يمكن تغييرها بـ JS، وتدعم الوراثة والـ @media.
| 1 | /* تعريف نظام ألوان ومسافات */ |
| 2 | :root { |
| 3 | --color-primary: #3b82f6; |
| 4 | --color-secondary: #8b5cf6; |
| 5 | --color-text: #0f172a; |
| 6 | --spacing-sm: 8px; |
| 7 | --spacing-md: 16px; |
| 8 | --spacing-lg: 32px; |
| 9 | --radius-md: 8px; |
| 10 | --radius-lg: 16px; |
| 11 | } |
| 12 | |
| 13 | .btn-primary { background: var(--color-primary); } |
| 14 | .card { padding: var(--spacing-md); border-radius: var(--radius-md); } |
مثال 1: نظام Dark Mode بالمتغيرات
| 1 | :root { |
| 2 | --bg: #ffffff; |
| 3 | --fg: #0f172a; |
| 4 | --border: #e2e8f0; |
| 5 | --shadow: rgba(0,0,0,0.08); |
| 6 | } |
| 7 | |
| 8 | [data-theme="dark"] { |
| 9 | --bg: #0f172a; |
| 10 | --fg: #f1f5f9; |
| 11 | --border: #334155; |
| 12 | --shadow: rgba(0,0,0,0.4); |
| 13 | } |
| 14 | |
| 15 | /* كل المكونات تستخدم المتغيرات تلقائياً */ |
| 16 | body { background: var(--bg); color: var(--fg); } |
| 17 | .card { |
| 18 | background: var(--bg); |
| 19 | border: 1px solid var(--border); |
| 20 | box-shadow: 0 2px 8px var(--shadow); |
| 21 | } |