تابع var() در CSS (The var() Function)
«تابع var()» در CSS مقدار یک «متغیر (Variable)» را وارد می کند. با متغیرهای CSS می توان حوزه سراسری و محلی ساخت، سپس با جاوااسکریپت یا Media Query مقادیر را تغییر داد. بنابراین نگه داری کد ساده تر شده و هماهنگی رنگ ها سریع تر انجام می شود.
اعلان متغیرها: حوزه سراسری و محلی
متغیر سراسری را داخل انتخاب گر :root تعریف کنید و متغیر محلی را در همان انتخاب گری که مصرف می شود. نام متغیر باید با دو خط تیره -- شروع شود و به حروف حساس است.
نحو (Syntax) اعلان
:root { --primary-bg-color: green; /* global scope */ } .note { --note-bg: yellow; /* local scope */ }تابع var(): نحو و پارامترها
تابع var() مقدار متغیر اعلام شده را برمی گرداند و می تواند مقدار پشتیبان داشته باشد تا در صورت نبود متغیر استفاده شود.
نحو (Syntax) تابع var()
/* var(--name, fallback) */ .box { color: var(--brand, #333); }- name: نام متغیر (الزامی).
- fallback: مقدار جایگزین در صورت نیافتن متغیر (اختیاری).
نکته: استفاده از «تابع var()» خوانایی کد را افزایش می دهد، به روزرسانی را ساده می کند و تغییر رنگ های سراسری را تسهیل می نماید.
نمونه استفاده از متغیرها و تابع var()
ابتدا دو متغیر سراسری تعریف می کنیم و سپس آن ها را در بخش های مختلف stylesheet به کار می بریم.
:root { --primary-bg-color: #1e90ff; --primary-color: #ffffff; } body { background-color: var(--primary-bg-color); } .container { color: var(--primary-bg-color); background-color: var(--primary-color); padding: 15px; } .container h2 { border-bottom: 2px solid var(--primary-bg-color); } .container .note { border: 1px solid var(--primary-bg-color); padding: 10px; }تعویض تم با تغییر مقادیر
برای تغییر ظاهر کل صفحه کافی است مقدار چند متغیر را عوض کنید؛ باقی سبک ها خودکار هماهنگ می شوند.
:root { --primary-bg-color: #8FBC8F; --primary-color: #FFFAF0; } body { background-color: var(--primary-bg-color); } .container { color: var(--primary-bg-color); background-color: var(--primary-color); padding: 15px; } .container h2 { border-bottom: 2px solid var(--primary-bg-color); } .container .note { border: 1px solid var(--primary-bg-color); padding: 10px; }نمونه مقدار پشتیبان (Fallback)
.badge { background: var(--accent, #ff6a00); }هشدار: اگر نام متغیر اشتباه باشد یا مقدار نامعتبر بدهید، «fallback» اعمال می شود یا ویژگی بی اثر می گردد؛ پس نام گذاری و نوع مقادیر را دقیق نگه دارید.
مطالعه بیشتر
برای ادامه یادگیری به صفحات مرتبط سر بزنید: رابط کاربری CSS و بازنویسی متغیرهای CSS. همچنین مستندات مرجع تابع var() و انتخاب گر :root را ببینید.