CSS Variables - The var() Function
CSS Variables یا متغیرهای CSS یکی از قابلیتهای قدرتمند CSS مدرن هستند که به شما اجازه میدهند مقادیر (مثل رنگها، اندازهها و ...) را یکبار تعریف کنید و در بخشهای مختلف استفاده کنید.
🔹 تعریف متغیر
متغیرها در CSS با --
شروع میشوند و معمولاً در داخل :root (ریشه داکیومنت) تعریف میشوند.
🔹 استفاده از متغیرها
برای استفاده از یک متغیر از تابع var()
استفاده میکنیم:
🔹 مقدار پیشفرض در var()
اگر متغیر وجود نداشت یا مرورگر پشتیبانی نکرد، میتوان یک مقدار پیشفرض داد:
👉 اگر --text-color
تعریف نشده باشد، مقدار black
استفاده میشود.
🔹 متغیرهای محلی
میتوان متغیرها را داخل یک selector تعریف کرد (فقط در همان محدوده معتبر خواهند بود):
🔹 تغییر متغیرها با جاوااسکریپت
یکی از مزایای CSS Variables اینه که میشه با JS تغییرشون داد:
✅ مثال کامل:
🔥 نتیجه:
-
متغیرهای CSS باعث کاهش تکرار کد میشن.
-
تغییر تم (Dark/Light Mode) رو خیلی راحت میکنن.
-
با جاوااسکریپت بهصورت داینامیک قابل تغییر هستن.