توابع CSS var()

تعریف و استفاده

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

مثال

مثال 1

ابتدا یک متغیر جهانی به نام --main-bg-color تعریف کنید، سپس در جدول استایل از آن استفاده کنید var() تابع برای وارد کردن مقدار متغیر:

:root {
  --main-bg-color: coral;
}
#div1 {
  background-color: var(--main-bg-color);
}
#div2 {
  background-color: var(--main-bg-color);
}

آزمایش کنید

مثال 2

استفاده از یک تابع دیگر var() مثال استفاده از چندین مقدار متغیر CSS در یک تابع:

:root {
  --main-bg-color: coral;
  --main-txt-color: blue;
  --main-padding: 15px;
}
#div1 {
  background-color: var(--main-bg-color);
  color: var(--main-txt-color);
  padding: var(--main-padding);
}
#div2 {
  background-color: var(--main-bg-color);
  color: var(--main-txt-color);
  padding: var(--main-padding);
}

آزمایش کنید

نحوه نوشتن CSS

var(--name, value)

جزئیات فنی

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

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

صفحات مرتبط

آموزش:متغیرهای CSS