آیا تابحال پیش آمده در پروژه‌ای بخواهی رنگ اصلی برند را تغییر دهی و مجبور شوی صدها خط CSS را ویرایش کنی؟ یا بخواهی به‌راحتی حالت Dark Mode را فعال کنی؟ متغیرهای CSS (Custom Properties) دقیقاً برای حل این مشکلات ساخته شده‌اند.

متغیرها یا Custom Properties یکی از مهم‌ترین قابلیت‌های مدرن CSS هستند که کدنویسی را منظم‌تر، خواناتر و منعطف‌تر می‌کنند. در این مقاله، هر آنچه باید درباره متغیرهای CSS بدانی را توضیح داده‌ام. اگر دوست داری عمیق‌تر بروی، می‌توانی به مقالات فرزند لینک‌شده در هر بخش مراجعه کنی.

متغیرهای CSS چیست؟

متغیرهای CSS به تو اجازه می‌دهند مقادیری مثل رنگ، اندازه یا حتی spacing را یک‌بار تعریف کنی و در چند جای مختلف استفاده کنی.

به‌جای اینکه بارها بنویسی:

h1 {
  color: #E6B127;
}

.button {
  background-color: #E6B127;
}

می‌توانی اینطور کدنویسی کنی:

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

h1 {
  color: var(--primary-color);
}

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

این کار نه‌تنها کد تو را مرتب‌تر می‌کند، بلکه اگر بعداً بخواهی رنگ برند را تغییر دهی، کافیست فقط یک خط را عوض کنی!

چگونه متغیرهای CSS را تعریف کنیم؟

تعریف Global در :root

رایج‌ترین جا برای تعریف متغیرها، :root است. این بخش مثل ریشه سند CSS است و متغیرهایی که آنجا تعریف می‌کنی، در کل پروژه قابل استفاده خواهند بود:

:root {
  --primary-color: #E6B127;
  --font-size-large: 24px;
}

هرجای پروژه بخواهی، می‌توانی از این متغیرها استفاده کنی.

تعریف Local در Scope محدود

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

.card {
  --card-padding: 20px;
}

.card-content {
  padding: var(--card-padding);
}

این تکنیک بسیار مفید است برای ساخت کامپوننت‌های مستقل و ماژولار.

چگونه از متغیرهای CSS استفاده کنیم؟

برای استفاده از متغیر، کافیست تابع var() را بنویسی و نام متغیر را داخل آن قرار دهی:

h2 {
  color: var(--primary-color);
}

حتی می‌توانی از متغیرها داخل محاسبات CSS استفاده کنی:

.container {
  width: calc(var(--container-width) - 40px);
}

فواید استفاده از متغیرهای CSS

استفاده از Custom Properties فقط یک ترفند شیک نیست؛ واقعاً پروژه‌های تو را حرفه‌ای‌تر می‌کند. برخی از فواید مهم آن:

✅ مدیریت راحت تم‌ها
می‌خواهی Dark Mode یا Light Mode پیاده کنی؟ کافیست مقادیر متغیرها را تغییر بدهی.

✅ خوانایی و نگهداری بهتر کد
وقتی کد تو پر از متغیر است، سریع می‌توانی بفهمی هر رنگ یا اندازه چه کاربردی دارد.

✅ صرفه‌جویی در زمان توسعه
یک تغییر کوچک در متغیر کافی است تا کل ظاهر سایت به‌روزرسانی شود.

✅ کاهش خطاها
استفاده از یک متغیر واحد باعث می‌شود کمتر دچار اشتباهات تایپی یا ناسازگاری رنگی شوی.

Fallback در متغیرهای CSS

یکی از ویژگی‌های جذاب متغیرهای CSS، امکان تعیین مقدار جایگزین (Fallback) است. فرض کن متغیری تعریف نشده یا مرورگر از Custom Properties پشتیبانی نکند. در این حالت، می‌توان یک مقدار پیش‌فرض تعیین کرد:

color: var(--heading-color, #333);

در این مثال، اگر --heading-color تعریف نشده باشد، رنگ متن به صورت پیش‌فرض #333 خواهد بود. استفاده از Fallback به کد تو پایداری بیشتری می‌دهد.

Best Practices در استفاده از متغیرهای CSS

برای حرفه‌ای‌تر شدن در استفاده از CSS Variables، این نکات را فراموش نکن:

  • نام‌های واضح و معنادار بده
    به‌جای --color1 بنویس --primary-color
  • متغیرهای سراسری را در :root قرار بده
    تا در کل پروژه در دسترس باشند.
  • از Fallback استفاده کن
    برای سازگاری بهتر در مرورگرهای مختلف.
  • متغیرهای خود را دسته‌بندی کن
    مثلاً رنگ‌ها، سایزها، spacingها هرکدام در گروه جدا.
  • در پروژه‌های بزرگ، فایل جدا برای متغیرها بساز
    تا همه چیز منظم‌تر باشد.

جمع‌بندی

متغیرهای CSS قدرت فوق‌العاده‌ای به تو می‌دهند تا طراحی‌های پیچیده و مدرن را راحت‌تر پیاده‌سازی کنی. این قابلیت‌ها به کد تو ساختار می‌دهند، توسعه را سریع‌تر می‌کنند و تغییرات آینده را بسیار آسان‌تر می‌کنند. اگر هنوز از متغیرها استفاده نمی‌کنی، حالا بهترین زمان شروع است!