سی‌اس‌اس/متغیرها

سفارشی‌سازی اسکرول

متغیرها

import

متغیرها

در CSS مدرن، می‌توان از متغیرها برای نگه‌داری مقادیر قابل استفادهٔ مجدد مانند رنگ‌ها، اندازه‌ها یا فونت‌ها استفاده کرد. این متغیرها با پیشوند ‎-- تعریف می‌شوند و در هر جایی از CSS قابل استفاده هستند.

تعریف متغیر

متغیرهای CSS معمولاً در محدودهٔ ‎:root (که معادل عنصر html است) تعریف می‌شوند تا در کل سند در دسترس باشند:

:root {
  --main-color: #3498db;
  --font-size: 16px;
}

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

برای استفاده از متغیر، از تابع ‎var()‎ استفاده می‌شود:

body {
  color: var(--main-color);
  font-size: var(--font-size);
}

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

نگهداری آسان‌تر رنگ‌ها و اندازه‌ها در پروژه‌های بزرگ
قابلیت تغییر تم (مثلاً تیره/روشن) تنها با چند خط کد
کاهش تکرار و افزایش خوانایی CSS
پشتیبانی بهتر از توسعه‌پذیری و طراحی ماژولار

مقدار پیش‌فرض در var

تابع ‎var()‎ می‌تواند یک مقدار پیش‌فرض نیز بپذیرد، در صورتی که متغیر تعریف نشده باشد:

color: var(--link-color, blue);

در این مثال، اگر ‎--link-color‎ تعریف نشده باشد، مقدار ‎blue‎ استفاده خواهد شد.

متغیرهای محلی

متغیرها می‌توانند به صورت محلی، تنها در محدودهٔ یک selector تعریف شوند:

.card {
  --border-color: #ccc;
  border: 1px solid var(--border-color);
}

مثال: تغییر تم (پوسته)

با تعریف متغیرها در ‎:root و بازنویسی آن‌ها در حالت تیره می‌توان پوستهٔ سایت را تغییر داد:

:root {
  --bg-color: white;
  --text-color: black;
}

[data-theme="dark"] {
  --bg-color: #121212;
  --text-color: #eeeeee;
}

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

تمرین پیشنهادی

یک طرح ساده بسازید که با تغییر مقدار ویژگی ‎data-theme‎ بین ‎light‎ و ‎dark‎، رنگ پس‌زمینه و متن تغییر کند. فقط از متغیرها برای رنگ‌ها استفاده کن.

نکات فنی و طراحی

متغیرها باید پیش از استفاده تعریف شده باشند.
متغیرها برای نام ویژگی‌ها قابل استفاده نیستند (نمی‌توان مثلاً مقدار border-style را به عنوان متغیر نام برد).
مقداردهی متغیر فقط در سطح خاصیت (property) ممکن است.
اگر مرورگر متغیرها را پشتیبانی نکند، باید برای هر مقدار یک fallback در نظر گرفت.

تأثیر بر تجربه کاربری و سئو

بهینه‌سازی عملکرد CSS با کاهش تکرار
قابلیت استفادهٔ مجدد از قالب‌ها
پشتیبانی از شخصی‌سازی رنگ‌ها برای دسترسی‌پذیری (Accessibility)
تغییر تم در حالت شب باعث کاهش خستگی چشم کاربران می‌شود

جدول پشتیبانی مرورگرها

مرورگر	پشتیبانی از متغیرهای CSS
Chrome	بله ✅
Firefox	بله ✅
Edge (نسخه جدید)	بله ✅
Safari	بله ✅
Internet Explorer	خیر ❌

پیوندهای مرتبط

جمع‌بندی

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