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

توابع CSS var()

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