آموزش متغیرهای CSS (CSS Variables): راهنمای جامع و کاربردی از صفر تا صد

ارسال توسط

3 مهر 1405

در تاریخ 7 مهر 1405

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

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

متغیرهای CSS که با نام رسمی “CSS Custom Properties” (ویژگی‌های سفارشی سی‌اس‌اس) شناخته می‌شوند، ویژگی‌هایی هستند که توسط طراح وب تعریف می‌شوند و حاوی مقادیر خاصی هستند که می‌توانند در سراسر سند CSS مجدداً استفاده شوند. تا قبل از معرفی این ویژگی در CSS3، طراحان وب مجبور بودند برای استفاده از متغیرها به سراغ پیش‌پردازنده‌هایی مانند Sass یا Less بروند. هرچند پیش‌پردازنده‌ها هنوز هم کاربردهای خاص خود را دارند، اما متغیرهای بومی CSS (Native CSS Variables) یک مزیت بزرگ دارند: آن‌ها مستقیماً در مرورگر پردازش می‌شوند و کاملاً پویا هستند. این یعنی شما می‌توانید آن‌ها را در زمان اجرا (Runtime) و با استفاده از جاوا اسکریپت تغییر دهید، کاری که با متغیرهای Sass که قبل از ارسال به مرورگر کامپایل می‌شوند، غیرممکن است.

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

استفاده از متغیرهای CSS مزایای بی‌شماری دارد که مهم‌ترین آن‌ها عبارتند از:

نگهداری آسان‌تر کدها (Maintainability): با تعریف رنگ‌ها و فونت‌های اصلی سایت در قالب متغیر، در صورت نیاز به تغییر برندینگ یا طراحی مجدد، تنها کافی است مقدار متغیر را در یک بخش تغییر دهید تا کل وب‌سایت به‌روز شود.
خوانایی بیشتر کدها (Readability): خواندن کدی که در آن از var(--primary-color) استفاده شده، بسیار آسان‌تر و معنادارتر از کدی است که در آن مقدار هگزادسیمال مانند #3498db تکرار شده است.
کاهش حجم فایل CSS: به دلیل تکرار کمتر مقادیر طولانی، حجم فایل نهایی شما کاهش می‌یابد که این موضوع تأثیر مستقیمی بر بهبود سرعت لود صفحات و ارتقای سئوی سایت دارد.
توسعه‌پذیری و پویایی بالا: امکان تغییر متغیرها با مدیا کوئری‌ها (Media Queries) و جاوا اسکریپت، ساخت قابلیت‌هایی مانند تم تاریک/روشن (Dark/Light Mode) را بسیار ساده می‌کند.

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

تعریف یک متغیر در CSS بسیار ساده است. برای این کار باید دو مرحله را طی کنیم:

تعریف متغیر با استفاده از دو خط تیره (--) در ابتدای نام آن.
استفاده از متغیر با استفاده از تابع var().

نام متغیرها به حروف کوچک و بزرگ حساس است (Case-Sensitive)؛ یعنی --primary-color با --Primary-Color دو متغیر متفاوت تلقی می‌شوند.

قلمرو یا Scope در متغیرهای CSS

متغیرها در CSS می‌توانند به دو صورت تعریف شوند:

متغیرهای عمومی (Global Variables): این متغیرها در بالاترین سطح سند (معمولاً در سلکتور :root) تعریف می‌شوند و در سراسر فایل CSS و برای تمامی عناصر قابل دسترسی هستند. سلکتور :root به ریشه سند اشاره دارد که در HTML همان تگ <html> است.
متغیرهای محلی (Local Variables): این متغیرها درون یک سلکتور خاص تعریف می‌شوند و تنها برای همان عنصر و فرزندان آن قابل استفاده خواهند بود.

بیایید به یک مثال عملی نگاه کنیم:

/* تعریف متغیرهای عمومی */
:root {
  --primary-color: #ff9900;
  --secondary-color: #2c3e50;
  --main-padding: 15px;
  --border-radius: 8px;
}

/* تعریف متغیر محلی */
.card {
  --card-bg: #f9f9f9; /* این متغیر فقط داخل کارد و فرزندان آن کار می‌کند */
  background-color: var(--card-bg);
  border-radius: var(--border-radius);
  padding: var(--main-padding);
}

.button {
  background-color: var(--primary-color);
  color: white;
  padding: 10px 20px;
  border-radius: var(--border-radius);
}

مقدار پشتیبان (Fallback Value) در متغیرها

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

.alert {
  /* اگر متغیر --alert-bg تعریف نشده باشد، از رنگ قرمز استفاده می‌شود */
  background-color: var(--alert-bg, #e74c3c);
}

شما حتی می‌توانید یک تابع var() دیگر را به عنوان مقدار پشتیبان قرار دهید:

.text {
  color: var(--custom-color, var(--primary-color, black));
}

ترکیب متغیرها با Flexbox و Grid برای طراحی ریسپانسیو

یکی از هیجان‌انگیزترین کاربردهای متغیرهای CSS، استفاده از آن‌ها در سیستم‌های چیدمان مدرن مانند Flexbox و CSS Grid است. شما می‌توانید با تغییر مقدار یک متغیر در مدیا کوئری‌ها، کل چیدمان صفحه را بدون نیاز به نوشتن مجدد استایل‌ها، ریسپانسیو کنید. پیشنهاد می‌کنیم برای تسلط بیشتر بر این مباحث، مقالات آموزش Flexbox در CSS و همچنین آموزش CSS Grid را در سایت طاووس وب مطالعه کنید.

به عنوان مثال، فرض کنید می‌خواهید تعداد ستون‌های یک گرید را متناسب با اندازه صفحه تغییر دهید:

:root {
  --grid-columns: 1;
  --grid-gap: 15px;
}

@media (min-width: 768px) {
  :root {
    --grid-columns: 2;
    --grid-gap: 20px;
  }
}

@media (min-width: 1024px) {
  :root {
    --grid-columns: 4;
  }
}

.container {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--grid-gap);
}

در کدهای بالا، ما بدون اینکه کلاس .container را در مدیا کوئری‌های مختلف تکرار کنیم، تنها با تغییر مقادیر متغیرها در سلکتور :root کل رفتار گرید خود را ریسپانسیو کرده‌ایم. این روش کدنویسی بسیار تمیز، خلاصه و بهینه‌تر است.

تغییر پویا متغیرها با جاوا اسکریپت (پیاده‌سازی تم تاریک و روشن)

همان‌طور که اشاره شد، متغیرهای CSS در زمان اجرا توسط مرورگر قابل دسترسی و تغییر هستند. این بدین معناست که با استفاده از جاوا اسکریپت می‌توانیم مقادیر آن‌ها را به صورت پویا تغییر دهیم. یکی از کاربردهای بسیار محبوب این قابلیت، پیاده‌سازی دکمه سوییچ تم تاریک (Dark Mode) است.

کد جاوا اسکریپت برای خواندن و نوشتن متغیرهای CSS به صورت زیر است:

// دریافت یک متغیر از ریشه سند
const rootStyles = getComputedStyle(document.documentElement);
const primaryColor = rootStyles.getPropertyValue('--primary-color').trim();

// تغییر مقدار یک متغیر در ریشه سند
document.documentElement.style.setProperty('--primary-color', '#ff3300');

بیایید یک نمونه ساده از پیاده‌سازی دکمه تم تاریک را پیاده‌سازی کنیم:

:root {
  --bg-color: #ffffff;
  --text-color: #333333;
}

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

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s;
}

حالا با یک خط کد جاوا اسکریپت می‌توانیم تم کل سایت را تغییر دهیم:

const toggleButton = document.querySelector('#theme-toggle');
toggleButton.addEventListener('click', () => {
  const currentTheme = document.documentElement.getAttribute('data-theme');
  if (currentTheme === 'dark') {
    document.documentElement.setAttribute('data-theme', 'light');
  } else {
    document.documentElement.setAttribute('data-theme', 'dark');
  }
});
```

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

تفاوت متغیرهای CSS با متغیرهای پیش‌پردازنده‌ها (Sass/Less)

بسیاری از طراحان وب می‌پرسند: “وقتی ما Sass داریم، چرا باید از متغیرهای بومی CSS استفاده کنیم؟” جدول زیر تفاوت‌های کلیدی این دو را نشان می‌دهد:

ویژگی	متغیرهای CSS	متغیرهای Sass / Less
نوع پردازش	در مرورگر و زمان اجرا (Dynamic)	در زمان کامپایل (Static)
دسترسی در JS	بله، کاملاً قابل تغییر و خواندن است	خیر، بعد از کامپایل از بین می‌روند
پشتیبانی از ارث‌بری	بله، بر اساس DOM ارث‌بری می‌کنند	خیر، بر اساس دامنه متغیرها در فایل کار می‌کنند
استفاده در مدیاکوئری	بله، می‌توان مقدار آن‌ها را تغییر داد	خیر، به صورت مستقیم امکان‌پذیر نیست

بنابراین، پیشنهاد بهترین روش استفاده همزمان از هر دو است. برای کارهای ساختاری و استاتیک از Sass و برای موارد پویا و قابل تعامل از متغیرهای CSS استفاده کنید.

نتیجه‌گیری

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

سوالات متداول (FAQ)

۱. آیا مرورگرهای قدیمی از متغیرهای CSS پشتیبانی می‌کنند؟

بله، متغیرهای CSS توسط تمامی مرورگرهای مدرن (شامل کروم، فایرفاکس، سافاری، اج و اپرا) به طور کامل پشتیبانی می‌شوند. تنها مرورگر اینترنت اکسپلورر ۱۱ و قبل از آن از این ویژگی پشتیبانی نمی‌کنند که با توجه به منسوخ شدن کامل آن‌ها، دیگر جای نگرانی وجود ندارد.

۲. آیا استفاده از متغیرهای CSS سرعت سایت را کاهش می‌دهد؟

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

۳. آیا می‌توان متغیرهای CSS را درون یکدیگر استفاده کرد؟

بله، شما می‌توانید مقدار یک متغیر را با استفاده از متغیر دیگر تعریف کنید. برای مثال: --main-padding: calc(var(--base-unit) * 2);. این قابلیت برای محاسبات ریاضی در CSS بسیار کاربردی است.

۴. فرق بین `:root` با تگ `html` در تعریف متغیر چیست؟

سلکتور :root به ریشه کل سند اشاره دارد و اولویت (Specificity) بالاتری نسبت به سلکتور html دارد. بنابراین تعریف متغیرها در :root به عنوان یک استاندارد جهانی در دنیای وب شناخته می‌شود.

پیشنهاد مطالعه: آموزش CSS Grid | آموزش Container Queries در CSS | دورهٔ رایگان آموزش Position ها در CSS

آموزش طراحی سایت و برنامه‌نویسی وب