ما هي خصائص CSS المخصصة (المتغيرات)؟

Question

Accepted Answer

**خصائص CSS المخصصة** (المتغيرات) تتيح لك تخزين القيم مرة واحدة وإعادة استخدامها. بخلاف متغيرات معالج Sass، فهي **حية في وقت التشغيل** — فهي تتسلسل وترث وقد تتغير باستخدام JavaScript أو استعلامات وسائط.

```css
:root {                 /* :root = the html element → global scope */
  --color-primary: #3b82f6;
  --spacing: 1rem;
  --radius: 8px;
}

.button {
  background: var(--color-primary);   /* use with var() */
  padding: var(--spacing);
  border-radius: var(--radius);
}
```

## القيم الاحتياطية

```css
color: var(--text-color, black); /* use black if --text-color isn't defined */
```

## تتسلسل ويمكن تحديد نطاقها/تجاوزها

```css
.card { --padding: 1rem; }
.card.compact { --padding: 0.5rem; } /* override locally — children using var() update */
```

لأنها ترث، فإن المتغير المعرف على الأب متاح لجميع الأحفاد ويمكن تجاوزه على شجرة فرعية — وهو شيء لا يمكن لمتغيرات Sass (التي يتم ترجمتها) أن تفعله.

## الميزة الأساسية: المظاهر في وقت التشغيل

```css
:root { --bg: white; --text: black; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #111; --text: #eee; } /* redefine the SAME vars for dark mode */
}
body { background: var(--bg); color: var(--text); }
```

بدّل المظهر كله بإعادة تعريف عدد قليل من المتغيرات — بدون قواعد مكررة. يمكنك أيضاً القيام بذلك في JS:

```js
document.documentElement.style.setProperty("--color-primary", "#e11d48");
```

هذا يحدّث فوراً كل عنصر يستخدم هذا المتغير — وهو أمر مستحيل مع متغيرات Sass المترجمة.

## لماذا يهمك هذا

متغيرات CSS هي أساس **المظاهر والرموز التصميمية** الحديثة: عرّف الألوان والمسافات مرة واحدة، وأعد استخدامها في كل مكان، وبدّل المظاهر (الوضع الداكن، متغيرات العلامة التجارية) في وقت التشغيل عبر استعلامات الوسائط أو JavaScript.

تجلب DRY والقيم الديناميكية إلى CSS العادي — بدون خطوة بناء مطلوبة.