متغیرهای سفارشی در CSS — معرفی و کاربردهای عملی

متغیرهای سفارشی در CSS (که معمولاً با نام CSS Custom Properties یا --* شناخته می‌شوند) ابزار قدرتمندی برای ساختن رابط‌های منعطف، قابل نگه‌داری و پویا فراهم می‌کنند. این متغیرها به شما امکان تعریف مقادیر قابل بازاستفاده را می‌دهند که می‌توانند در هر جای برگ استایل با تابع var() فراخوانی شوند. در این مقاله به مفاهیم پایه، نکات پیشرفته، مثال‌های واقعی و بهترین شیوه‌های استفاده خواهیم پرداخت.

سینتکس پایه

:root {
  --main-color: #0d6efd;
  --gap: 1rem;
}

.button {
  background: var(--main-color);
  padding: var(--gap);
  color: white;
}

در این مثال، متغیرها در ریشه سند (:root) تعریف شده‌اند تا در سراسر صفحه در دسترس باشند. تابع var(--main-color) مقدار ذخیره‌شده را جایگزین می‌کند.

محدوده (Scope) و توارث (Inheritance)

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

.card {
  --card-bg: #fff;
  background: var(--card-bg);
}
.card.dark {
  --card-bg: #1e1e1e;
  color: #fff;
}

در این مثال، هر کارت می‌تواند بک‌گراند مخصوص به خود داشته باشد و تغییر کلاس .dark تنها روی همان کارت اثر می‌گذارد.

ارزش‌های پیش‌فرض و محاسبات

.box {
  width: calc(100% - var(--gap, 16px));
  margin: var(--gap, 16px);
}

تابع var() می‌تواند مقدار پیش‌فرض دریافت کند (var(--gap, 16px))، همین‌طور می‌توان آن را داخل calc() برای انجام محاسبات به‌کار برد. این ترکیب بسیار کاربردی برای طراحی‌های ریسپانسیو است.

مثال‌های عملی و الگوهای مرسوم

تمینگ (Theming) و حالت تاریک

:root {
  --bg: #ffffff;
  --fg: #111111;
  --accent: #0d6efd;
}

[data-theme="dark"] {
  --bg: #0b0b0b;
  --fg: #f1f1f1;
  --accent: #66b2ff;
}

body {
  background: var(--bg);
  color: var(--fg);
}
a { color: var(--accent); }

با تعریف متغیرها در :root و بازتعریف آن‌ها در یک کلاس یا صفت (مثل data-theme="dark") می‌توان به‌راحتی بین تم‌ها سوییچ کرد. تغییر صفت روی ریشه باعث بازنگری همه عناصر وابسته بدون تغییر کلاس‌های جزئی می‌شود.

کامپوننت‌های قابل استفاده مجدد

.card {
  --card-padding: 1.25rem;
  padding: var(--card-padding);
  border-radius: var(--card-radius, 8px);
}

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

تعامل با JavaScript

// Toggle theme using JS
const root = document.documentElement;
root.setAttribute('data-theme', 'dark'); // or 'light'
root.style.setProperty('--accent', '#ff5722');

با استفاده از DOM API می‌توان مقادیر متغیرها را در زمان اجرا تغییر داد (مثلاً برای سوییچ تم، انیمیشن یا تنظیمات کاربران). تغییر یک متغیر روی عنصر ریشه معمولاً باعث بازترسیم عناصر وابسته بدون اصلاح مستقیم استایل‌های متعدد می‌شود.

پشتیبانی از انیمیشن‌ها و registerProperty

// Example of registering a property for smooth transitions (experimental)
if ('registerProperty' in CSS) {
  CSS.registerProperty({
    name: '--progress',
    syntax: '',
    inherits: false,
    initialValue: 0
  });
}

API CSS.registerProperty به شما اجازه می‌دهد نوع متغیر، مقدار اولیه و اینکه آیا به ارث می‌رسد را ثبت کنید. این ویژگی کمک می‌کند متغیرها قابل انیمیت شوند و مرورگر بتواند آن‌ها را به‌صورت بهینه پردازش کند. توجه کنید که این API هنوز در همه مرورگرها کامل پشتیبانی نمی‌شود.

نکات مهم، محدودیت‌ها و بهترین شیوه‌ها

• متغیرها تنها در مقادیر قابل محاسبه استفاده می‌شوند؛ شما نمی‌توانید نام ویژگی‌ها (property names) یا شناسه‌های @rule را با آن‌ها جایگزین کنید.
• قابل استفاده در اکثر خواص CSS، از جمله color، background، transform و داخل calc()؛ اما در شرایطی که مقدار باید در زمان پارس شدن وجود داشته باشد (مثلاً @keyframes name یا selector) قابل استفاده نیست.
• برای پشتیبانی از مرورگرهای قدیمی (مثلاً Internet Explorer)، نیاز به fallback یا استفاده از PostCSS دارید.
• بهتر است متغیرهایی که قرار است در سرتاسر پروژه استفاده شوند را در :root تعریف کنید و متغیرهای محلی را در محدوده کامپوننت نگه دارید.
• برای دسترسی‌پذیری، تغییر تم‌ها باید با توجه به کنتراست رنگ و ترجیحات کاربر (مانند prefers-color-scheme) انجام شود.

نمونه جدول پشتیبانی مرورگر (خلاصه)

مثال کامل: تم تیره/روشن با سوییچ و ذخیره در localStorage

// JavaScript
const btn = document.querySelector('#theme-toggle');
const root = document.documentElement;

btn.addEventListener('click', () => {
  const current = root.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
  root.setAttribute('data-theme', current);
  localStorage.setItem('theme', current);
});

// on load
const saved = localStorage.getItem('theme');
if (saved) {
  root.setAttribute('data-theme', saved);
}

این قطعه JS نشان می‌دهد چگونه می‌توانید با تغییر صفت روی عنصر ریشه و ذخیره تنظیم کاربر در localStorage تجربهٔ پایدار تم را فراهم کنید. استایل‌ها قبلاً با استفاده از متغیرها تعریف شده‌اند، بنابراین تنها تغییر صفت کافیست.

خلاصه و توصیه‌های پایانی

متغیرهای سفارشی در CSS ابزار منعطف و قدرتمندی برای ساخت سیستم‌های طراحی، تمینگ داینامیک و نگهداری کدهای CSS فراهم می‌کنند. با رعایت محدودیت‌ها (مثل عدم استفاده در نام ویژگی‌ها یا بعضی at-ruleها) و بهره‌گیری از ترکیب با calc()، JavaScript و APIهای نوین مانند registerProperty می‌توان طراحی‌ای قابل توسعه، سریع و خوانا ساخت. همیشه برای سازگاری مرورگرها و دسترسی‌پذیری تست انجام دهید و متغیرها را به‌صورت منطقی در سطح ریشه یا کامپوننت سازمان‌دهی کنید.

لطفاً از کمبود ها و مشکلات این محتوا برای ما بنویسید

ارسال