متغیرهای CSS

متغیرهای CSS

توابع var() برای وارد کردن مقادیر متغیرهای CSS استفاده می‌شود.

متغیرهای CSS می‌توانند به DOM دسترسی داشته باشند، این بدان معناست که شما می‌توانید متغیرهای محلی یا جهانی ایجاد کنید، متغیرها را با استفاده از JavaScript تغییر دهید و متغیرها را بر اساس پرسش‌های رسانه‌ای تغییر دهید.

یک روش خوب برای استفاده از متغیرهای 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() به شرح زیر است:

var(name, value)
مقدار توضیح
name لازم. نام متغیر (با دو خط تیره شروع می‌شود).
value اختیاری. مقادیر پیش‌فرض (در صورت عدم یافتن متغیر استفاده می‌شود).

توجه:نام متغیرها باید با دو خط تیره (--) شروع شوند و باید بزرگ‌کوچک‌نویسی‌شان متفاوت باشد!

چگونه var() کار می‌کند

ابتدا: متغیرهای CSS می‌توانند جهانی یا محلی باشند.

متغیرهای جهانی می‌توانند در کل مستند قابل دسترسی/استفاده باشند، در حالی که متغیرهای محلی تنها می‌توانند در داخل انتخابگر اعلام شده استفاده شوند.

برای ایجاد متغیرهای جهانی، آن را در انتخابگر :root قرار دهید. انتخابگر :root با عنصر ریشه مستند مطابقت دارد.

برای ایجاد متغیرهای محلی، آن را در انتخابگر مورد استفاده قرار دهید که قصد دارید از آن استفاده کنید.

این مثال مشابه مثال بالا است، اما در اینجا از تابع var() استفاده شده است.

ابتدا دو متغیر جهانی را اعلام می‌کنیم (--blue و --white). سپس از تابع 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;
}

آزمایش کنید

پشتیبانی مرورگر

اعداد در جدول نشان‌دهنده نسخه اولین مرورگر هستند که از این ویژگی پشتیبانی می‌کند.

توابع
var() 49.0 15.0 31.0 9.1 36.0

توابع var() CSS

توابع توضیح
var() مقدار متغیر CSS را وارد کنید.