متغیرهای CSS به شما این امکان را می‌دهند که مقادیر تکراری را به صورت متغیر تعریف کنید و از آن‌ها در هر جای استایل استفاده کنید. این قابلیت همچنین به شما امکان دسترسی به DOM را می‌دهد، به این معنی که می‌توانید متغیرها را با جاوا اسکریپت تغییر داده یا بر اساس کوئری‌های رسانه‌ای تنظیم کنید.
یکی از استفاده‌های خوب از متغیرهای CSS در مدیریت رنگ‌ها است. به جای کپی و پیست کردن رنگ‌های مشابه در نقاط مختلف استایل، می‌توانید آن‌ها را در متغیرها ذخیره کنید.
روش سنتی
در روش سنتی، شما باید رنگ‌ها را به صورت دستی برای هر عنصر به‌طور جداگانه تعریف کنید:
body { background-color: #1e90ff; }
h2 { border-bottom: 2px solid #1e90ff; }
.container {
color: #1e90ff;
background-color: #ffffff;
padding: 15px;
}
button {
background-color: #ffffff;
color: #1e90ff;
border: 1px solid #1e90ff;
padding: 5px;
}نحو تابع var()
تابع var() برای درج مقدار یک متغیر CSS استفاده می‌شود. نحو این تابع به شکل زیر است:
var(--name, value)نحوه کار تابع var()
متغیرهای CSS می‌توانند دارای حوزه محلی (local) یا سراسری (global) باشند.
- متغیرهای سراسری: می‌توانند در تمام سند دسترسی داشته باشند.
- متغیرهای محلی: فقط در داخل سلکتوری که در آن تعریف شده‌اند استفاده می‌شوند.
برای تعریف متغیر سراسری، از سلکتور :root استفاده می‌شود که با عنصر ریشه سند مطابقت دارد.
مثال استفاده از تابع var()
ابتدا دو متغیر سراسری تعریف می‌کنیم (برای رنگ‌های آبی و سفید). سپس با استفاده از تابع var() مقدار این متغیرها را در استایل‌ها وارد می‌کنیم:
:root {
--blue: #1e90ff;
--white: #ffffff;
}
body { background-color: var(--blue); }
h2 { border-bottom: 2px solid var(--blue); }
.container {
color: var(--blue);
background-color: var(--white);
padding: 15px;
}
button {
background-color: var(--white);
color: var(--blue);
border: 1px solid var(--blue);
padding: 5px;
}مزایای استفاده از var()
- کد را خواناتر و قابل فهم‌تر می‌کند.
- تغییر مقادیر رنگ‌ها را بسیار ساده‌تر می‌کند.
برای مثال، اگر بخواهید رنگ‌ها را به یک آبی و سفید ملایم تغییر دهید، تنها نیاز دارید که مقادیر متغیرها را تغییر دهید:
:root {
--blue: #6495ed;
--white: #faf0e6;
}
body { background-color: var(--blue); }
h2 { border-bottom: 2px solid var(--blue); }
.container {
color: var(--blue);
background-color: var(--white);
padding: 15px;
}
button {
background-color: var(--white);
color: var(--blue);
border: 1px solid var(--blue);
padding: 5px;
}
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام