متغیرهای CSS یا همان custom properties، یکی از بهترین امکانات جدید CSS هستند که به طراحان وب اجازه می‌دهند مقادیر سراسری تعریف کنند و در هر جایی از کدهای CSS خود که نیاز دارند، از آنها استفاده کنند. این امکان علاوه بر کاهش تکرار کدها، مدیریت و تغییر آنها را هم بسیار آسان‌تر می‌کند.
به طور کلی، استفاده از متغیرهای CSS به طراحی وب خاصیت انعطاف‌پذیری و مقیاس‌پذیری بیشتری می‌بخشد. برای شروع و استفاده از آنها، کافیه تا بفهمیم چگونه می‌شود این متغیرها را تعریف کنیم و سپس به آنها دسترسی داشته باشیم.
قبل از هر چیز، باید بدانید که متغیرهای CSS تنها در محدوده‌ای قابل استفاده هستند که تعریف شده‌اند، به همین خاطر باید با وسواس ناحیه تعریف آنها را انتخاب کنید. بهترین روش استفاده از آنها در ریشه سند، یعنی در :root، است تا همه اجزاء از آن بهره ببرند.
به عنوان مثال، فرض کنید می‌خواهید یک رنگ اصلی برای تمام سایت‌تان تعریف کنید. می‌توانید این کار را با یک متغیر CSS انجام دهید و هر جا که نیاز بود، تنها نام این متغیر را صدا بزنید.
در زیر یک مثال تصویری از نحوه تعریف و استفاده از متغیرهای CSS می‌آید. این مثال ساده و آسان به شما کمک می‌کند تا متغیرهای CSS را در پروژه‌های وب خود استفاده کنید.
امیدوارم با این توضیحات اولیه بتوانید به راحتی از این قابلیت فوق‌العاده در طراحی و توسعه وبسایت خود استفاده کنید و از مزایای آن بهره‌مند شوید.
:root {
--main-color: #ff6347;
--secondary-color: #4caf50;
--font-stack: 'Helvetica Neue', sans-serif;
}
body {
font-family: var(--font-stack);
color: var(--main-color);
}
button {
background-color: var(--secondary-color);
color: #fff;
border: none;
padding: 10px 15px;
}
خط اول نشان می‌دهید که چطور متغیرها را تعریف کنیم با استفاده از :root.
کد --main-color یک متغیر CSS است که به رنگ اصلی سایت اختصاص داده شده.
کد --secondary-color یک متغیر دیگر است برای رنگ دکمه‌ها.
کد --font-stack یک متغیر برای تعریف فونت پیش فرض است.
در بخش دیگری از CSS، ما به راحتی می‌توانیم متغیرها را با استفاده از کد var() فراخوانی کنیم.
کد font-family: var(--font-stack); در body فونت را با استفاده از متغیرها اعمال می‌کند.
متغیر --main-color برای رنگ متن به کار رفته.
متغیر --secondary-color برای دکمه‌ها استفاده شده که کاربرد آن را در بگ‌راند مشخص می‌کند.