خاصیت های سفارشی css(که به نام متغیرهای css شناخته می شوند) یک مزیت بزرگ برای طراحان وب محسوب می شوند که قدرت متغیرها را برای css به ارمغان می آورد  و موجب کم شدن تکرار، خوانایی بهتر و انعطاف پذیری بیشتر آن می شوند.

به علاوه، برخلاف متغیرهای پیش پردازنده css،  متغیرهای css بخشی از DOM هستند که این امر دارای مزیت های بسیاری است. بنابراین آنها شبیه متغیرهای SASS و LESS در steroid ها هستند.

چرا متغیرهای css را یاد بگیریم؟

دلایل زیادی برای استفاده از متغیرها وجود دارد. یکی از آنها کاهش تکرار در فایل css شماست.

در مثال بالا ایجاد یک متغیر برای رنگ #ff6f69 از تکرار دوباره آن بسیار بهتر است. بنابراین اینگونه آن را مینویسیم:

این کار نه تنها باعث راحت تر خوانده شدن کد شما میشود بلکه برای حالتی که بخواهید این رنگ را تغییر دهید به شما قابلیت انعطاف پذیری می دهد.

اگرچه این امر در گذشته با متغیرهای LESS و SASS نیز امکان پذیر بوده است. با این حال متغیر های css دارای مزیت های بسیاری اند.

1. آنها به هیچ وجه نیاز به انتقال ندارند. زیرا آنها در مرورگر، بومی هستند. بنابراین شما به هیچ راه اندازی برای شروع نیاز ندارید.
2. انها در DOM قرار می گیرند. که این خود دارای فایده های زیادی است.

حالا یادگیری متغیرهای css را شروع می کنیم.

اعلان اولین متغیر css شما

برای اعلان یک متغیر، ابتدا شما باید بدانید میخواهید این متغیر در چه فضایی کارکند. اگر شما میخواهید متغیرتان دسترسی سراسری داشته باشد باید آن را در کلاس ساختگی root: تعریف کنید که با عنصر ریشه در سند درخت شما مطابقت دارد. این امر که متغیر ها به ارث برده می شوند باعث می شود متغیرها در سرتاسر برنامه شما قابل دسترس باشند. همانطور که عنصرهای DOM فرزند تگ html هستند.

:root {
  --main-color: #ff6f69;
}

همانطور که می بینید یک متغیر را مانند سایر خاصیت های css تعریف می کنید. با این تفاوت که در ابتدای آن دو خط تیره قرار می دهید.

برای دسترسی به متغیر باید از تابع ()var استفاده کنید و نام متغیر را به عنوان پارامتر به این تابع بدهید.

#title {
  color: var(--main-color);
}

اعلان یک متغیر محلی

شما همچنین می توانید متغیرهای محلی تعریف کنید که تنها در همان عنصری که تعریف شده اند و فرزندان آنها قابل دسترس خواهند بود. این کار را زمانی انجام دهید که می دانید متغیر تنها در قسمت خاصی از برنامه شما استفاده خواهد شد.

برای مثال، شما ممکن است یک باکس هشدار داشته باشید که از رنگ خاصی استفاده میکند که این رنگ در جاهای دیگر برنامه به کارتان نمی آید. بنابراین آن را در محدوده سراسری قرار نمی دهید.

.alert {
  --alert-color: #ff6f69;
}

این متغیر حالا می تواند توسط فرزندان آن عنصر نیز مورد استفاده قرار گیرد.

.alert p {
  color: var(--alert-color);
  border: 1px solid var(--alert-color);
}

اگر سعی کنید که از متغیر alert-color در جای دیگری از برنامه تان استفاده کنید کار نخواهد کرد و مرورگر آن خط از css را نادیده خواهد گرفت.

پاسخگویی آسان تر با متغیرها

یکی از مزیت های مهم متغیرهای css  دسترسی به DOM می باشد. که متغیرهای SASS و LESS این امکان را ندارند.

در عمل این بدان معنی است که شما می توانید متغیرها را مثلا بر اساس عرض صفحه تغییر دهید.

:root {
  --main-font-size: 16px;
}
media all and (max-width: 600px) {
  :root {
    --main-font-size: 12px;
  }
}

با این 4 خط کد شما میتوانید اندازه کلی فونت را در سراسر برنامه تان هنگام مشاهده در صفحه نمایش های کوچک تغییر دهید.

چگونه به متغیر ها در جاوا اسکریپت دسترسی پیدا کنیم؟

مزیت دیگر قرار داشتن متغیرها در DOM این است که شما می توانید با جاوا اسکریپت به آنها دسترسی داشته باشید وحتی آنها را تغییر بدهید. برای مثال زمانی که شما می‌خواهید به کاربرانتان اجازه تغییر در سایتتان را بدهید.

برای دسترسی به متغیرهای css در جاوا اسکریپت به 3 خط کد نیاز دارید:

var root = document.querySelector(':root');
var rootStyles = getComputedStyle(root);
var mainColor = rootStyles.getPropertyValue('--main-color');
console.log(mainColor); 
--> '#ffeead'

برای تغییر متغیرهای css کافیست تابع ()setProperty را در عنصری که متغیرها در آن تعریف شده اند صدا بزنیم و نام متغیر را به عنوان پارامتر اول و مقدار جدید را به عنوان پارامتر دوم به تابع بدهیم.

root.style.setProperty('--main-color', '#88d8b0');

این رنگ میتواند کل ظاهربرنامه شما را تغییر دهد. پس برای اجازه دادن به کاربران برای تنظیم تم سایت شما مناسب است.