مقدمه
متغیرها (Variables) یکی از اجزای کلیدی زبان‌های برنامه نویسی هستند. به زبان ساده، متغیرها روشی برای ذخیره
کردن مقادیر و داده‌ها فراهم می‌کنند. هر متغیر دارای نامی است که از آن نام برای ارجاع به داده‌ی ذخیره‌شده در
آن متغیر استفاده می‌شود. در CSS برای سال‌ها متغیرها فقط از طریق پیش‌پردازنده‌هایی نظیر SASS و LESS در دسترس
و قابل استفاده بوده و هستند. اما در حال حاضر، متغیرهای بومی CSS که به طور رسمی Custom Properties نامیده
می‌شوند، در مرورگرهای مدرن پشتیبانی می‌شوند. در این درس، در مورد متغیرهای CSS و کاربرد و نحوه‌ی استفاده از
آنها صحبت می‌کنیم.
استفاده از متغیرها
چرا ما باید به استفاده از متغیرها در CSS نیاز داشته باشیم؟ فرض کنید وبسایتی را برای یک شرکت طراحی می‌کنید و
در این طراحی از یک رنگ مانند #3FA2D9 که رنگ اصلی موجود در برند این شرکت است، در جاهای مختلفی از سایت استفاده
می‌کنید. حالا فرض کنید شرکت مورد نظر لوگو یا برند خود را تغییر داده و از رنگ جدیدی در آن بهره می‌برد. حالا
شما محبورید در هر جایی از کدها که از رنگ سابق استفاده کرده‌اید، اصلاح و تغییر کد رنگ را انجام دهید.
به جای این رویکرد، می‌توانیم یک متغیر با نامی مثل brand-color تعریف کنیم که کد رنگ مورد نظر را در خود ذخیره
کرده و هرجا که به آن رنگ نیاز داریم، از این متغیر استفاده کنیم. در این صورت، چنانچه قصد تغییر داشته باشیم،
کافیست تنها در یک مکان یعنی جایی که متغیر را تعریف کرده‌ایم، تغییر را اعمال کنیم و مقدار جدیدی به متغیر
بدهیم.
متغیرهای CSS با دو کاراکتر خط فاصله (hyphen) که با نام متغیر ادامه می‌یابد، ایجاد می‌شوند:
--brand-color: #3FA2D9;
برای استفاده از مقدار ذخیره شده در این متغیر، باید نام متغیر را به عنوان آرگومان تابعی به نام var() وارد
کنیم:
background-color: var(--brand-color);
تابع var() می‌تواند یک آرگومان اختیاری دیگر نیز داشته باشد که یک مقدار fallback برای زمانی است که متغیر
تعریف نشده باشد یا به هر دلیلی، مقدارش در دسترس نباشد:
background-color: var(--brand-color, #3FA2D9);
وراثت متغیرها
اگر تعریف یک متغیر را درون بلاک مربوط به یک انتخابگر انجام دهیم، محدوده‌ی (scope) آن متغیر را محدود کرده‌ایم
اما با قرار دادن تعریف متغیر در انتخابگر html یا :root متغیر در هر بخش از استایل‌شیت قابل دسترسی و استفاده
است. مثال زیر را ببینید:
CSS
.container{
--heading-color: blue;
font-family: Arial, sans-serif;
}
.container h1{
color: var(--heading-color);
}
برای اعمال یک متغیر روی کل سند، می‌توانیم آن را همانند زیر با استفاده از انتخابگر :root تنظیم کنیم:
CSS
:root{
--text-color: red;
}
.container{
color: var(--text-color);
font-family: Arial, sans-serif;
}