CSS – تابع var() (The var() Function)

متغیرهای 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)
  • 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;
}

پست های مرتبط

مطالعه این پست ها رو از دست ندین!
JavaScript - رویدادها (Events)

JavaScript – رویدادها (Events)

رویدادهای HTML رویدادها در HTML، “اتفاقاتی” هستند که برای عناصر HTML رخ می‌دهند. این اتفاقات می‌توانند ناشی از کار...

بیشتر بخوانید
JavaScript - سازنده‌های شیء (Object Constructors)

JavaScript – سازنده‌های شیء (Object Constructors)

ساخت آبجکت با تابع سازنده (Object Constructor Function) برای ساخت چندین آبجکت مشابه، از تابع سازنده استفاده می‌شود. این...

بیشتر بخوانید
JavaScript - نمایش شیء (Object Display)

JavaScript – نمایش شیء (Object Display)

نحوه نمایش آبجکت‌ها در جاوااسکریپت هنگام نمایش یک آبجکت جاوااسکریپت به صورت مستقیم، خروجی معمولاً به شکل [object Object]...

بیشتر بخوانید

نظرات

سوالات و نظراتتون رو با ما به اشتراک بذارید

برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید.