ویژگی سفارشی CSS (متغیرها)

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

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

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

تابع

var()

49.0

15.0

31.0

9.1

36.0

تابع var()

متغیرها در CSS باید در یک انتخابگر CSS اعلام شوند که دامنه آن را تعریف می کند. برای محدوده جهانی می توانید از :root یا body استفاده کنید.

نام متغیر باید با دو خط تیره (-) شروع شود و حساس به حروف است!

ساختار عملکرد ()var به شرح زیر است:

مثال زیر ابتدا یک ویژگی سفارشی سراسری به نام "main-bg-color--" را تعریف می کند، سپس از تابع ()var برای وارد کردن مقدار ویژگی سفارشی بعدا استایل استفاده می کند:

:root {
    --main-bg-color: coral;
}

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

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

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

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