O‘zgaruvchilarni qayta belgilash
Global o‘zgaruvchini lokal o‘zgaruvchi bilan almashtirish
Oldingi sahifada global o‘zgaruvchilarga butun hujjat bo‘ylab kirish mumkinligini, lokal o‘zgaruvchilar esa faqat e’lon qilingan selektor ichida ishlatilishini o‘rgangan edik.
Ba’zan o‘zgaruvchilar faqat sahifaning ma’lum bo‘limida o‘zgarishini xohlaymiz.
<p class="note"> elementlari uchun boshqacha chegara rangi kerak deb faraz qilaylik. Bunda --primary-bg-color o‘zgaruvchisini .note selektori ichida qayta e’lon qilishimiz mumkin. Bu selektor ichida var(--primary-bg-color) ishlatilsa, shu yerda e’lon qilingan mahalliy --primary-bg-color o‘zgaruvchi qiymati ishlatiladi.
Lokal --primary-bg-color o‘zgaruvchisi .note selektori uchun global --primary-bg-color o‘zgaruvchisini almashtirishini ko‘ramiz:
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 {
--primary-bg-color: red; /* local variable will override global */
border: 1px solid var(--primary-bg-color);
padding: 10px;
}
O‘zingiz sinab ko‘ring »
Yangi lokal o‘zgaruvchi qo‘shish
Agar o‘zgaruvchi faqat bitta joyda ishlatiladigan bo‘lsa, yangi lokal o‘zgaruvchi e’lon qilishimiz ham mumkin edi, mana bunday:
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 {
--note-border-color: red; /* new local variable */
border: 1px solid
var(--note-border-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!