CSS o‘zgaruvchilar
CSS o‘zgaruvchilari
var() funksiyasi CSS o‘zgaruvchisining qiymatini kiritish uchun ishlatiladi.
CSS o‘zgaruvchilari DOM’ga kirish huquqiga ega — bu lokal yoki global doirada o‘zgaruvchilar yaratishingiz, ularni JavaScript bilan o‘zgartirishingiz va media so‘rovlarga qarab o‘zgartirishingiz mumkinligini anglatadi.
CSS o‘zgaruvchilaridan foydalanishning yaxshi joyi — dizayningiz ranglari. Bir xil ranglarni doimiy nusxalash va qo‘yish o‘rniga, ularni o‘zgaruvchilarga joylashtirishingiz mumkin.
CSS o‘zgaruvchini e’lon qilish
CSS o‘zgaruvchilari global yoki mahalliy doiraga ega bo‘lishi mumkin.
Global o‘zgaruvchilarga butun hujjat bo‘ylab kirish mumkin, lokal o‘zgaruvchilar esa faqat e’lon qilingan selektor ichida ishlatilishi mumkin.
Global o‘zgaruvchi yaratish uchun uni :root selektori ichida e’lon qiling. :root selektori hujjatning ildiz elementiga mos keladi.
Lokal o‘zgaruvchi yaratish uchun uni ishlatadigan selektor ichida e’lon qiling.
CSS o‘zgaruvchi nomi ikki chiziqcha (--) bilan boshlanishi kerak va katta-kichik harflarga sezgir!
Sintaksis
:root {
--primary-bg-color: green; /* global scope */
}
.note {
--note-bg:
yellow; /* local scope */
}
CSS var() funksiyasi
var() funksiyasi e’lon qilingan CSS o‘zgaruvchisining qiymatini kiritish uchun ishlatiladi.
Sintaksis
var(--name, value)
| Qiymat | Tavsif |
|---|---|
| name | Majburiy. O‘zgaruvchi nomi (ikkita chiziqcha bilan boshlanishi shart) |
| value | Ixtiyoriy. Zaxira qiymati (agar o‘zgaruvchi topilmasa ishlatiladi) |
var() dan foydalanishning afzalliklari:
- Kodni saqlashni osonlashtiradi (yangilashlarni soddalashtiradi)
- Kodni o‘qishni osonlashtiradi (ko‘proq tushunarli qiladi)
- Butun sahifa rang qiymatlarini o‘zgartirishni osonlashtiradi
CSS o‘zgaruvchilari misoli
Bu yerda ikkita global o‘zgaruvchi e’lon qilamiz (--primary-bg-color va --primary-color).
Keyin stillar jadvalida keyinchalik o‘zgaruvchilar qiymatini kiritish uchun var() funksiyasidan foydalanamiz:
Misol
:root {
--primary-bg-color: #1e90ff;
--primary-color:
#ffffff;
}
body {
background-color:
var(--primary-bg-color);
}
.container {
color:
var(--primary-bg-color);
background-color: var(--primary-color);
padding: 15px;
}
.container h2 {
border-bottom: 2px solid
var(--primary-bg-color);
}
.container .note {
border: 1px
solid var(--primary-bg-color);
padding: 10px;
}
O‘zingiz sinab ko‘ring »
Sahifa ko‘rinishini o‘zgartirish uchun shunchaki ikkita o‘zgaruvchi qiymatini o‘zgartirish kifoya:
Misol
:root {
--primary-bg-color: #8FBC8F;
--primary-color:
#FFFAF0;
}
body {
background-color: var(--primary-bg-color);
}
.container {
color: var(--primary-bg-color);
background-color: var(--primary-color);
padding: 15px;
}
.container h2 {
border-bottom: 2px solid var(--primary-bg-color);
}
.container .note {
border: 1px solid
var(--primary-bg-color);
padding: 10px;
}
O‘zingiz sinab ko‘ring »
CSS var() funksiyasi
| Function | Tavsif |
|---|---|
| var() | CSS o‘zgaruvchisining qiymatini kiritadi |
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!