Custom Properties

منظور از Custom Properties همون متغیرهای CSS ئه که به این شکل می‌تونیم تعریفشون کنیم:

:root {
  --color-primary: hsl(210deg 80% 35%);
}

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

متغیرهای رنگ

فرض کنید تو سایتمون از یه رنگ به‌عنوان رنگ اصلی می‌خوایم استفاده کنیم. اگه واسش متغیر تعریف نکنیم، مجبوریم هر موقع که می‌خوایم ازش استفاده کنیم، دوباره مقدارش رو بنویسیم یا از یه جای دیگه Copy/Paste کنیم.

این کار می‌تونه باعث بروز اشتباه انسانی و باگ بشه. مثلاً ممکنه دستمون بخوره و یه عدد کم و زیاد شه.

از طرفی اگه در آینده بخوایم رنگ اصلی سایت رو عوض کنیم، مجبوریم تمام جاهایی که استفاده‌شده رو پیدا کنیم و تغییرشون بدیم.

به جاش می‌تونیم یه متغیر براش تعریف کنیم:

:root {
  --color-primary: hsl(210deg 80% 35%);
}

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

input:focus {
  outline: 1px solid var(--color-primary);
}

img {
  border: 1px solid var(--color-primary);
}

اینجوری هر موقع بخوایم مقدار رو عوض کنیم، فقط یه جا رو تغییر می‌دیم و باقی سایت خود‌به‌خود اصلاح میشه.

اسم متغیرها

اسم متغیرها باید بر اساس کاری باشه که انجام میدن. به‌عنوان مثال اگه یه متغیر برای رنگ اصلی داریم تعریف می‌کنیم، اسمش باید --color-primary باشه.

❌ Wrong Code

.chiz {
  --color-blue: hsl(210deg 80% 35%);
}

✅ Correct Code

.chiz {
  --color-primary: hsl(210deg 80% 35%);
}

تو کد اول مشکلی که پیش میاد اینه که اگه در آینده بخوایم رنگ رو عوض کنیم، اسم متغیر دیگه معنی نمیده؛ بنابراین مجبور میشیم بریم تمام جاهایی که از اون متغیر استفاده کردیم رو تغییر بدیم؛ در صورتی که اصن از اول به خاطر این از متغیرها استفاده کردیم که صرفاً با عوض‌کردن یه خط، بتونیم کل سایت رو تغییر بدیم.