در CSS (سی‌اس‌اس)، متغیرها (Variables) به شما اجازه می‌دهند تا مقادیری را که معمولاً در کد CSS خود بارها تکرار می‌کنید را تعریف کرده و از آن‌ها در سراسر سبک‌های مختلف خود استفاده کنید. این امکان به شما کمک می‌کند تا کد CSS خود را بهبود بخشیده و آن را به شکلی سازمان‌یافته‌تر و قابل نگهداری‌تری ایجاد کنید. در CSS 3، متغیرها با استفاده از ویژگی -- (dash dash) در تعریف نام متغیر ایجاد می‌شوند.
اگر هنوز دوره طراحی سایت با HTML , CSS کامل و پیشرفته ندیدی بهتره از لینک زیر شروع کنی :
این یک نمونه ساده از تعریف یک متغیر در CSS 3 است:
:root {
--main-color: #007bff; /* تعریف متغیر با نام --main-color و مقدار آن #007bff */
}در این مثال، متغیر --main-color با مقدار #007bff تعریف شده است. شما می‌توانید این متغیر را در تمام جاهای کد CSS خود استفاده کنید، به این شکل:
body {
background-color: var(--main-color); /* استفاده از متغیر --main-color به عنوان مقدار پس‌زمینه بدنه (body) */
}با استفاده از متغیرها، می‌توانید مقادیر رنگ، فونت، حاشیه‌ها، پس‌زمینه‌ها و دیگر ویژگی‌های CSS را به راحتی مدیریت کنید و تغییر دهید، بدون نیاز به تغییر در تمام مکان‌هایی که این مقادیر به کار رفته‌اند.
