CSS Variables - The var() Function

CSS Variables یا متغیرهای CSS یکی از قابلیت‌های قدرتمند CSS مدرن هستند که به شما اجازه می‌دهند مقادیر (مثل رنگ‌ها، اندازه‌ها و ...) را یک‌بار تعریف کنید و در بخش‌های مختلف استفاده کنید.

🔹 تعریف متغیر

متغیرها در CSS با -- شروع می‌شوند و معمولاً در داخل :root (ریشه داکیومنت) تعریف می‌شوند.

:root { --main-color: coral; --padding-size: 20px; }

🔹 استفاده از متغیرها

برای استفاده از یک متغیر از تابع var() استفاده می‌کنیم:

div { color: var(--main-color); padding: var(--padding-size); }

🔹 مقدار پیش‌فرض در var()

اگر متغیر وجود نداشت یا مرورگر پشتیبانی نکرد، می‌توان یک مقدار پیش‌فرض داد:

p { color: var(--text-color, black); }

👉 اگر --text-color تعریف نشده باشد، مقدار black استفاده می‌شود.

🔹 متغیرهای محلی

می‌توان متغیرها را داخل یک selector تعریف کرد (فقط در همان محدوده معتبر خواهند بود):

.card { --card-bg: lightgray; background: var(--card-bg); }

🔹 تغییر متغیرها با جاوااسکریپت

یکی از مزایای CSS Variables اینه که می‌شه با JS تغییرشون داد:

<button onclick="changeColor()">تغییر رنگ</button> <div class="box">Hello CSS Variables</div>
:root { --main-color: blue; } .box { background: var(--main-color); color: white; padding: 20px; }
function changeColor() { document.documentElement.style.setProperty('--main-color', 'tomato'); }

✅ مثال کامل:

<!DOCTYPE html> <html lang="fa"> <head> <meta charset="UTF-8"> <title>CSS Variables Example</title> <style> :root { --main-bg: #f4f4f4; --main-color: #333; --padding: 15px; } body { background: var(--main-bg); color: var(--main-color); padding: var(--padding); } h1 { color: var(--main-color, black); } </style> </head> <body> <h1>سلام! من با CSS Variables ساخته شدم</h1> </body> </html>

🔥 نتیجه:

  • متغیرهای CSS باعث کاهش تکرار کد می‌شن.

  • تغییر تم (Dark/Light Mode) رو خیلی راحت می‌کنن.

  • با جاوااسکریپت به‌صورت داینامیک قابل تغییر هستن.