کدهای تمیز: با متغیرها، CSS را هوشمند کنید! 💡

متغیرهای CSS (Custom Properties): کد تمیزتر، مدیریت راحت‌تر! 🎨

سلام به همگی! توی پروژه‌های CSS، خیلی وقتا پیش میاد که یه رنگ، یه فونت، یا یه فاصله رو بارها و بارها توی جاهای مختلف استفاده می‌کنیم. مثلاً رنگ اصلی سایت‌مون رو فرض کنید. هر بار که بخوایم این رنگ رو عوض کنیم، باید بگردیم و همه جا رو دستی پیدا کنیم و تغییر بدیم. این کار هم خسته‌کننده‌ است، هم احتمال خطا داره. 😩 راه حل چیه؟ متغیرهای CSS (CSS Custom Properties)! این قابلیت بهمون اجازه می‌ده مقادیر رو تعریف کنیم و بعد هر جا لازم داشتیم، ازشون استفاده کنیم. بیاین ببینیم چطور می‌تونیم با متغیرها، کدمون رو مرتب‌تر و مدیریت‌پذیرتر کنیم! 👍

1. متغیر CSS یعنی چی؟ یه اسم برای یه مقدار! 🏷️

متغیرهای CSS به ما اجازه می‌دن که یه اسم دلخواه (که با -- شروع می‌شه) رو به یه مقدار (مثل رنگ، اندازه، فونت و …) اختصاص بدیم. بعد می‌تونیم هر جای CSS که لازم داشتیم، از این اسم استفاده کنیم.

نحوه‌ی تعریف:

:root { /* معمولاً متغیرها رو در :root تعریف می‌کنیم که سراسری باشن */
  --primary-color: #007bff; /* رنگ آبی اصلی */
  --secondary-color: #6c757d; /* رنگ خاکستری */
  --base-font-size: 16px;
  --spacing-unit: 8px;
}

• :root: این یک تگ شبیه به html هست ولی با اولویت بالاتر. تعریف متغیرها در اینجا باعث می‌شه که در کل سند CSS ما قابل دسترسی باشن.
• --variable-name: نام متغیر باید با دو خط تیره (--) شروع بشه.
• : value;: بعد از نام متغیر، مقدار مورد نظر رو قرار می‌دیم.

2. استفاده از متغیرها: تابع `var()`! 📞

برای اینکه از مقداری که توی یه متغیر ذخیره کردیم استفاده کنیم، از تابع var() استفاده می‌کنیم.

body {
  font-size: var(--base-font-size); /* استفاده از متغیر فونت */
  color: var(--primary-color); /* استفاده از رنگ اصلی */
  padding: var(--spacing-unit); /* استفاده از واحد فاصله */
}

.button-primary {
  background-color: var(--primary-color); /* رنگ پس‌زمینه دکمه */
  color: white;
  padding: calc(var(--spacing-unit) * 2) var(--spacing-unit); /* محاسبه padding با متغیر */
  border: none;
  border-radius: 5px;
}

.button-secondary {
  background-color: var(--secondary-color); /* رنگ پس‌زمینه دکمه ثانویه */
  color: white;
  padding: calc(var(--spacing-unit) * 2) var(--spacing-unit);
  border: none;
  border-radius: 5px;
}

• var(--variable-name): این تابع، مقدار ذخیره شده در اون متغیر رو برمی‌گردونه.
• استفاده با calc(): می‌تونیم متغیرها رو توی عملیات ریاضی با calc() هم استفاده کنیم، که فوق‌العاده کاربردیه!

3. چرا متغیرها انقدر خوبن؟ مزایا! 🤩

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

• مدیریت آسان تم (Theming): می‌تونید به راحتی تم‌های مختلفی برای سایت‌تون بسازید. کافیه مقادیر متغیرها رو در بخش‌های مختلف تغییر بدید. مثلاً تم روشن و تیره!
• کد تمیزتر و خواناتر: به جای تکرار مقادیر، از اسم‌های معنی‌دار استفاده می‌کنید.
• قابلیت استفاده مجدد (Reusability): یه بار تعریف می‌کنید و بارها استفاده.
• انعطاف‌پذیری بالا: با جاوااسکریپت هم می‌تونید مقادیر متغیرها رو تغییر بدید، که این امکان رو می‌ده تا تم سایت رو به صورت دینامیک عوض کنید.

تصور کنید می‌خواید رنگ اصلی سایت رو از آبی به قرمز تغییر بدید. اگه از متغیر استفاده کرده باشید، فقط کافیه مقدار --primary-color رو در :root از #007bff به #dc3545 تغییر بدید! کل سایت‌تون یهویی قرمز می‌شه! 🤯

4. متغیرهای محلی (Local Scoped Variables): کنترل بیشتر! 🤏

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

.theme-dark {
  --text-color: #eee; /* رنگ متن تیره */
  --background-color: #333; /* پس‌زمینه تیره */
}

.theme-light {
  --text-color: #333; /* رنگ متن روشن */
  --background-color: #fff; /* پس‌زمینه روشن */
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
}

h1 {
  color: var(--primary-color); /* این متغیر سراسری از :root میاد */
}

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

5. مقدار پیش‌فرض در `var()`: اطمینان از درستی! ✅

گاهی ممکنه متغیری که صدا می‌زنیم، تعریف نشده باشه. در این حالت، CSS اون مقدار رو نادیده می‌گیره. برای جلوگیری از این مشکل، می‌تونیم یه مقدار پیش‌فرض تعریف کنیم.

.element {
  /* اگه --my-color تعریف نشده باشه، از red استفاده می‌شه */
  color: var(--my-color, red);
}

متغیرهای CSS انقلابی در نحوه‌ی مدیریت و نوشتن CSS هستن. استفاده از اون‌ها باعث می‌شه کدهایی که می‌نویسید، هم حرفه‌ای‌تر، هم خواناتر و هم خیلی راحت‌تر قابل تغییر باشن. حتماً ازشون توی پروژه‌هاتون استفاده کنید تا تفاوتش رو حس کنید! موفق باشید! 🚀