متغیرهای CSS

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

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

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

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

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

تابع var()

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

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

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

var(custom-name, value)
مقدار
شرح
custom-name
ضروری. نام مالکیت سفارشی (باید با دو خط شروع شود)
value
اختیاری. مقدار بازگشتی (استفاده می شود اگر ویژگی سفارشی نامعتبر است)

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

تابع var
:root {
    --main-bg-color: coral;
}

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

#div2 {
    background-color: var(--main-bg-color);
}
مشاهده مثال

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

تابع 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);
}
مشاهده مثال

 

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

یادگیری CSS

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط