آموزش جامع متغیرهای CSS

🎯 اهداف یادگیری

• درک مفهوم متغیرها در CSS
• یادگیری نحوه تعریف و استفاده از متغیرها
• آشنایی با محدوده متغیرها (Scope)
• کاربرد متغیرها در طراحی واکنش‌گرا
• مدیریت تم رنگ با متغیرها

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

متغیرهای CSS (که با نام Custom Properties نیز شناخته می‌شوند) امکان ذخیره و استفاده مجدد از مقادیر در سراسر stylesheet را فراهم می‌کنند:

:root {
  /* تعریف متغیر */
  --primary-color: #4285f4;
  --padding: 15px;
}
.button {
  /* استفاده از متغیر */
  background-color: var(--primary-color);
  padding: var(--padding);
}

ویژگی‌های کلیدی متغیرهای CSS:

• پیشوند --: تمامی متغیرهای CSS با دو خط تیره شروع می‌شوند
• تابع var(): برای دسترسی به مقدار متغیرها استفاده می‌شود
• محدوده (Scope): متغیرها می‌توانند به صورت سراسری یا محلی تعریف شوند

📌 نحوه تعریف و استفاده از متغیرها

متغیرهای CSS را می‌توان در هر جایی از stylesheet تعریف کرد، اما معمولاً در :root تعریف می‌شوند:

/* تعریف متغیرهای سراسری */
:root {
  --main-font: 'Segoe UI', Tahoma, sans-serif;
  --brand-color: #1a73e8;
  --border-radius: 4px;
}
.card {
  /* استفاده از متغیرها */
  font-family: var(--main-font);
  border: 1px solid var(--brand-color);
  border-radius: var(--border-radius);
}

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

• کاهش تکرار کد (DRY Principle)
• قابلیت تغییر مقادیر به صورت مرکزی
• خوانایی و نگهداری بهتر کد
• امکان ایجاد تم‌های پویا (Theming)

📌 محدوده متغیرها (Scope)

متغیرهای CSS می‌توانند محدوده سراسری یا محلی داشته باشند:

/* متغیر سراسری - قابل دسترسی در تمام المان‌ها */
:root {
  --global-var: red;
}
/* متغیر محلی - فقط در این المان و فرزندانش قابل دسترسی */
.container {
  --local-var: blue;
  color: var(--local-var);
}

قوانین محدوده (Scope):

• محدوده سراسری: تعریف در :root - قابل دسترسی در تمام document
• محدوده محلی: تعریف در یک selector خاص - فقط در آن و فرزندانش قابل دسترسی
• اولویت: متغیرهای محلی بر متغیرهای سراسری با نام یکسان اولویت دارند

📌 مدیریت تم رنگ با متغیرها

متغیرهای CSS برای مدیریت تم‌های رنگی بسیار مفید هستند:

:root {
  /* تم روشن (پیش‌فرض) */
  --primary-bg: #ffffff;
  --primary-text: #212121;
}
/* تم تیره */
.dark-mode {
  --primary-bg: #121212;
  --primary-text: #f5f5f5;
}
body {
  background-color: var(--primary-bg);
  color: var(--primary-text);
}

تغییر تم با جاوااسکریپت:

// تغییر به تم تیره
document.documentElement.classList.add('dark-mode');
// بازگشت به تم روشن
document.documentElement.classList.remove('dark-mode');

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

• تغییر سریع تمام رنگ‌ها با تغییر یک متغیر
• امکان ایجاد چندین تم مختلف
• قابلیت تغییر پویای تم با جاوااسکریپت
• خوانایی و سازماندهی بهتر کدهای CSS

📌 مقادیر پیش‌فرض و fallback

می‌توان برای متغیرها مقدار پیش‌فرض تعریف کرد در صورتی که متغیر تعریف نشده باشد:

.element {
  /* اگر --main-color تعریف نشده باشد، از مقدار #ccc استفاده می‌شود */
  color: var(--main-color, #ccc);
  /* fallbackهای چندگانه */
  padding: var(--padding, var(--default-padding, 10px));
}

موارد استفاده از fallback:

• پشتیبانی از مرورگرهای قدیمی: برخی مرورگرها از متغیرهای CSS پشتیبانی نمی‌کنند
• مقادیر اختیاری: وقتی مقدار متغیر ممکن است تعریف نشده باشد
• توسعه پذیری: اجازه می‌دهد دیگر توسعه‌دهندگان مقادیر پیش‌فرض را بازنویسی کنند

📌 متغیرها در مدیا کوئری‌ها

می‌توان از متغیرها برای ایجاد تغییرات واکنش‌گرا استفاده کرد:

:root {
  --font-size: 16px;
  --spacing: 8px;
}
@media (min-width: 768px) {
  :root {
    --font-size: 18px;
    --spacing: 16px;
  }
}
body {
  font-size: var(--font-size);
  padding: var(--spacing);
}

مزایای این روش:

• کاهش تعداد مدیا کوئری‌ها: تغییر چندین خاصیت با تغییر یک متغیر
• خوانایی بهتر: منطق واکنش‌گرایی در یک متمرکز می‌شود
• انعطاف‌پذیری بیشتر: امکان تغییر مقادیر بدون نیاز به تغییر selectorها

📌 تمرین عملی

یک سیستم طراحی با متغیرهای CSS ایجاد کنید:

/* تمرین: سیستم طراحی با متغیرها */
/* 1. تعریف رنگ‌های اصلی */
/* 2. تعریف فاصله‌ها (spacing) */
/* 3. تعریف سایز فونت‌ها */
/* 4. ایجاد یک دکمه با استفاده از متغیرها */

راهنمای تمرین:

1. متغیرهای رنگ برای primary, secondary, error, success تعریف کنید
2. متغیرهایی برای فاصله‌های مختلف (کوچک، متوسط، بزرگ) ایجاد کنید
3. متغیرهایی برای سایز فونت‌های مختلف تعریف کنید
4. یک کلاس .button ایجاد کنید که از این متغیرها استفاده کند
5. تم تیره برای دکمه‌ها ایجاد کنید

📌 قدم بعدی

در درس بعدی با انیمیشن‌ها و ترنزیشن‌های CSS آشنا خواهیم شد!