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;
}

Related posts

Don't miss reading these posts!
JavaScript - کلمه کلیدی Let (Let)

JavaScript – کلمه کلیدی Let (Let)

تعریف let کلیدواژه let در ES6 (2015) معرفی شد و دارای ویژگی‌های خاصی است که آن را از var...

Read more
JavaScript - متغیرها (Variables)

JavaScript – متغیرها (Variables)

متغیرها در جاوا اسکریپت متغیرها در جاوا اسکریپت به عنوان ظرف‌هایی برای ذخیره‌سازی داده‌ها استفاده می‌شوند و می‌توانند به...

Read more
JavaScript - کامنت‌ها (Comments)

JavaScript – کامنت‌ها (Comments)

کامنت‌ها در جاوا اسکریپت کامنت‌ها در جاوا اسکریپت به برنامه‌نویسان این امکان را می‌دهند تا توضیحاتی را به کد...

Read more

Comments

Share your comments with us

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