CSS o'zgaruvchilari (custom properties): e'lon qilish va var() bilan ishlatish

Qisqacha: CSS o'zgaruvchisi (custom property) — nomi ikki chiziqcha bilan boshlanadigan xususiyat: --rang-asosiy: #2f6b3a;. Uni var(--rang-asosiy) bilan istalgan qiymat o'rniga qo'yasiz. Odatda o'zgaruvchilar :root da e'lon qilinadi va meros orqali butun sahifaga tarqaladi. Ichki elementda xuddi shu nomni qayta e'lon qilsangiz, faqat o'sha qismning qiymati o'zgaradi. var(--nom, zaxira) ning ikkinchi qismi o'zgaruvchi topilmaganda ishlaydi.

Bu darsda

• CSS o'zgaruvchisini e'lon qilasiz va var() bilan ishlatasiz.
• «Bahor» palitrasini oltita nomli o'zgaruvchiga aylantirasiz.
• Nega o'zgaruvchilar :root da turishini va ular meros orqali qanday tarqalishini tushuntirasiz.
• Sahifaning bir qismida o'zgaruvchini qayta aniqlab, butun blok rangini bitta joydan o'zgartirasiz.
• Zaxira qiymat yozasiz va CSS o'zgaruvchisini Sass o'zgaruvchisidan farqlaysiz.

Oldin bilishingiz kerak: Meros va qiymat bosqichlari, Tuzilma pseudo-klasslari (:root), Ranglar 1, Specificity.

1. Nega bu kerak?

«Bahor»ning asosiy.css fayli o'sib bormoqda. Undagi to'q yashil #2f6b3a endi ko'p joyda: sarlavhalarda, menyu havolalarida, taom kartasining ramkasida, fokus chizig'ida. Qizg'ish #b4461a esa narxlarda va aksiya matnida.

Bir kuni Jasur aka aytadi: "Yashil biroz ochroq bo'lsin". Siz faylni qidirasiz va o'ndan ortiq #2f6b3a topasiz. Hammasini almashtirish kerakmi? Ehtimol, bittasi aslida boshqa ma'noda turgandir — masalan, bezak chizig'i, u o'zgarmasligi kerak. Hex kodning o'zi buni aytmaydi. #b4461a ni ko'rgan yangi dasturchi esa "bu nima rangi?" deb so'raydi.

Choyxonadagi narx taxtasini eslang. Otabek har taomning narxini yodlab yurmaydi. U taxtaga qaraydi: "Osh — 35 000". Jasur aka narxni o'zgartirsa, taxtadagi bitta yozuvni almashtiradi — ertasiga hamma ofitsiant yangi narxni aytadi.

CSS o'zgaruvchisi — xuddi shu taxta. Siz rangga nom berasiz: --rang-asosiy. Qoidalarda esa hex emas, nom yoziladi. Rangni o'zgartirish uchun bitta qatorni tuzatasiz, qolgan hamma joy o'zi yangilanadi. Nom esa rang nimaga kerakligini ham aytib turadi.

2. Birinchi o'zgaruvchi

2.1 E'lon qilish

:root {
  --rang-asosiy: #2f6b3a;
}

Bu — oddiy deklaratsiya: nom, ikki nuqta, qiymat, nuqtali vergul. Farqi bitta: nom ikki chiziqcha (--) bilan boshlanadi. Bunday xususiyat maxsus xususiyat (custom property) deb ataladi: uning nomini brauzer emas, siz o'ylab topasiz. Kundalik tilda hamma uni CSS o'zgaruvchisi (CSS variable) deydi — biz ham shunday deymiz.

Brauzer bu qatorni ko'rib, ekranda hech narsa chizmaydi. U faqat eslab qoladi: "--rang-asosiy ning qiymati — #2f6b3a". Taxtaga yozildi, lekin hali hech kim o'qimadi.

2.2 var() bilan o'qish

O'zgaruvchini ishlatish uchun qiymat o'rniga var() funksiyasini yozasiz, qavs ichida — o'zgaruvchi nomi:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-urgu: #b4461a;
  }
  h1 {
    color: var(--rang-asosiy);
  }
  .taom-karta {
    border: 2px solid var(--rang-asosiy);
    padding: 4px 12px;
  }
  .narx {
    color: var(--rang-urgu);
  }
</style>
<h1>Bugungi menyu</h1>
<article class="taom-karta">
  <h3>Osh</h3>
  <p>Narxi: <span class="narx">35 000 so'm</span></p>
</article>

Nimaga qarang: sarlavha va karta ramkasi bir xil yashil, narx qizg'ish. Hex kod faylda faqat bir marta — :root ichida yozilgan. Endi "Tahrirlab ko'rish" tugmasini bosing va --rang-asosiy qiymatini #1a5d1a ga almashtiring. Sarlavha ham, ramka ham birga to'qlashadi.

var() qiymatning bir bo'lagi ham bo'la oladi: border: 2px solid var(--rang-asosiy). Brauzer uni o'qiyotganda var(...) ni o'zgaruvchining qiymati bilan almashtiradi va natijada 2px solid #2f6b3a hosil bo'ladi.

Tekshirib ko'ring: Aksiya matni urg'u rangida bo'lsin: .aksiya { color: (--rang-urgu); }. Qavs ichidagi nomda nechta chiziqcha bor?

3. «Bahor» palitrasi — oltita nom

3.1 :root bloki

Shu paytgacha «Bahor» darslarida oltita rang hex ko'rinishida yurdi. Endi ularning har biriga ma'noli nom beramiz. Bu blok asosiy.css ning eng boshida turadi:

/* «Bahor» palitrasi */
:root {
  --rang-asosiy: #2f6b3a;     /* brend: sarlavha, havola, ramka */
  --rang-asosiy-toq: #1a5d1a; /* fokus halqasi, hover */
  --rang-urgu: #b4461a;       /* narx, aksiya */
  --rang-fon: #fffaf0;        /* qaymoq fon */
  --rang-matn: #1f2a24;       /* asosiy matn */
  --rang-ikkinchi: #5b6660;   /* ikkinchi darajali matn */
}

Bu nomlar kursning keyingi hamma CSS darslarida ishlatiladi. Ranglar tasodifiy emas: har biri qaymoq fonda o'qilishi tekshirilgan. --rang-matn fon bilan 14.3:1 kontrast beradi, eng past ko'rsatkich — --rang-urgu da, 5.3:1. Hammasi Accessibility darsidagi 4.5:1 talabidan yuqori.

Diqqat: Bu palitra hozircha faqat yorug' rejim uchun. «Bahor» HTML'ida esa Favicon darsidan beri <meta name="color-scheme" content="light dark"> turibdi. Shuning uchun qorong'i rejimdagi telefonda sahifa qaymoq rangda qoladi, forma maydonlari esa qorong'i ko'rinishi mumkin. Bu xato emas, oraliq holat: Ranglar 3 darsida palitraga qorong'i qiymatlarni qo'shib, buni tuzatamiz.

3.2 Palitra ishda

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-asosiy-toq: #1a5d1a;
    --rang-urgu: #b4461a;
    --rang-fon: #fffaf0;
    --rang-matn: #1f2a24;
    --rang-ikkinchi: #5b6660;
  }
  body {
    background-color: var(--rang-fon);
    color: var(--rang-matn);
    font-family: system-ui, sans-serif;
  }
  h1,
  h3 {
    color: var(--rang-asosiy);
  }
  .taom-karta {
    border: 2px solid var(--rang-asosiy);
    padding: 4px 12px;
  }
  .narx {
    color: var(--rang-urgu);
    font-weight: bold;
  }
  small {
    color: var(--rang-ikkinchi);
  }
</style>
<h1>Choyxona «Bahor»</h1>
<article class="taom-karta">
  <h3>Lag'mon</h3>
  <p>Qo'lda cho'zilgan xamir, mol go'shti.</p>
  <p><span class="narx">28 000 so'm</span></p>
  <p><small>Tayyorlash vaqti — 20 daqiqa</small></p>
</article>

Nimaga qarang: fon qaymoq, oddiy matn deyarli qora, sarlavhalar va ramka yashil, narx qizg'ish, kichik izoh kulrang. Qoidalarda birorta ham hex kod yo'q — faqat nomlar. Kodni o'qigan odam color: var(--rang-ikkinchi) dan "bu ikkinchi darajali matn" ekanini darhol tushunadi.

3.3 Tartib muhim emasmi?

:root bloki fayl boshida turishi — kelishuv, texnik talab emas. var() qiymati sahifa chizilishi oldidan, hamma qoidalar o'qib bo'lingach hisoblanadi. Shuning uchun o'zgaruvchi fayl oxirida e'lon qilinsa ham, yuqoridagi qoidalar uni ko'radi.

Lekin bitta o'zgaruvchi ikki marta e'lon qilinsa, oddiy Kaskad qoidasi ishlaydi. Ikkalasi bir xil selektorda bo'lsa, pastdagisi yutadi. O'zgaruvchi — baribir xususiyat, u kaskaddan tashqarida emas.

4. Nom qanday tanlanadi

4.1 Grammatika

• Nom -- bilan boshlanadi. Undan keyin harf, raqam, chiziqcha va pastki chiziq (_) bo'lishi mumkin.
• Katta-kichik harf farqlanadi. Chrome'da tekshirdik: :root da --rang-asosiy bor bo'lsa, var(--Rang-asosiy) uni topmaydi. Bu oddiy xususiyatlardan farqli: COLOR va color bir xil edi.
• Nom ichida bo'sh joy bo'lmaydi: --rang asosiy — xato deklaratsiya, brauzer uni tashlab ketadi.

Kursdagi kelishuv class nomlari bilan bir xil: kichik harf, o'zbekcha, so'zlar chiziqcha bilan — kebab-case.

4.2 Qiymatga emas, ma'noga qarab nomlang

Bitta guruhdagi nomlar bir xil boshlansin: hamma rang --rang- bilan. VS Code var(--r deb yozganingizda shu fayldagi o'zgaruvchilarni taklif qiladi — bir xil boshlanish ro'yxatni tartibli qiladi.

Maslahat: Nom — kelajakdagi o'zingizga xat. Uch oydan keyin faylni ochganingizda --rang-ikkinchi sizga ko'p narsa aytadi, #5b6660 esa hech narsa.

5. :root va meros: o'zgaruvchi qayerda ko'rinadi

5.1 Nega aynan :root

Tuzilma pseudo-klasslari darsidan eslang: :root — hujjatning ildiz elementi, HTML sahifada bu html. Sahifadagi hamma element uning ichida.

Endi eng muhim fakt: CSS o'zgaruvchilari meros bo'lib o'tadi. Meros darsida color otadan bolaga o'tishini ko'rgan edik, border esa o'tmaydi. Hamma maxsus xususiyat color kabi ishlaydi: ota elementda e'lon qilingan qiymat hamma avlodlariga yetib boradi.

flowchart TD
  R[":root<br/>--rang-asosiy: #2f6b3a"] --> B["body"]
  B --> H["header"]
  B --> M["main"]
  B --> F["footer"]
  M --> A["article.taom-karta"]
  A --> T["h3 — var() yashilni oladi"]

Nimaga qarang: o'zgaruvchi faqat tepada, :root da yozilgan. Lekin meros zanjiri bo'ylab u eng pastdagi h3 gacha tushadi. Shuning uchun global o'zgaruvchilar :root ga yoziladi: undan yuqorida hech narsa yo'q, demak hamma element uni ko'radi.

Nega html emas, :root? Ikkalasi bir xil elementni tanlaydi. Lekin :root — pseudo-klass, uning og'irligi class bilan teng, html esa teg kabi yengil (Specificity). Chrome'da tekshirdik: :root { --x: 1 } va html { --x: 2 } birga yozilsa, 1 yutadi. Hamma loyihada :root yoziladi — siz ham shunday qiling.

5.2 O'zgaruvchi faqat o'z "shoxida" ko'rinadi

O'zgaruvchini :root da emas, pastroqdagi elementda e'lon qilsangiz, u faqat shu elementning ichida mavjud bo'ladi:

<style>
  main {
    --rang-urgu: #b4461a;
  }
  p {
    color: var(--rang-urgu, #5b6660);
  }
</style>
<main>
  <p>Osh — 35 000 so'm (main ichida)</p>
</main>
<footer>
  <p>Ish vaqti: 7:00–23:00 (main tashqarisida)</p>
</footer>

Nimaga qarang: birinchi paragraf qizg'ish, ikkinchisi kulrang. footer main ning bolasi emas — meros u yerga yetmaydi. Ikkinchi paragraf uchun --rang-urgu umuman yo'q, shuning uchun var() dagi vergul orqasidagi kulrang ishladi. Bu vergulli qism — zaxira qiymat, uni pastroqda, «Zaxira qiymat» bo'limida ko'ramiz.

Tekshirib ko'ring: --rang-asosiy faqat header da e'lon qilingan. footer ichidagi havola color: var(--rang-asosiy) bilan yashil bo'ladimi?

6. Lokal qayta aniqlash

6.1 Bir xil nom — boshqa qiymat

Merosning yana bir natijasi bor. Ichki elementda xuddi shu nomni qayta e'lon qilsangiz, o'sha element va uning ichidagilar yangi qiymatni oladi. Qolgan sahifa esa eskisini ko'raveradi.

«Bahor»ning footer i to'q rangda bo'lsin. Buning uchun footer ichidagi uchta rangni almashtiramiz:

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-fon: #fffaf0;
    --rang-matn: #1f2a24;
  }
  body,
  footer {
    background-color: var(--rang-fon);
    color: var(--rang-matn);
  }
  a {
    color: var(--rang-asosiy);
  }
  footer {
    --rang-fon: #1f2a24;
    --rang-matn: #fffaf0;
    --rang-asosiy: #8fd19e;
    padding: 4px 12px;
  }
</style>
<main>
  <p>Stol band qilish: <a href="bron/">bron sahifasi</a></p>
</main>
<footer>
  <p>Savollar bo'lsa: <a href="aloqa/">aloqa sahifasi</a></p>
</footer>

Nimaga qarang: ikkita havola bitta a qoidasiga bo'ysunadi. Lekin tepadagisi to'q yashil, footer'dagisi esa och yashil. a qoidasi o'zgarmadi — o'zgaruvchining qiymati o'zgardi. Footer ichidagi havola --rang-asosiy ni eng yaqin otasidan, ya'ni footer dan oladi. #8fd19e — Favicon darsidagi qorong'i rejim rangi, u to'q fonda 8.3:1 kontrast beradi.

Choyxonaning filialini tasavvur qiling. Filialda o'z narx taxtasi bor: ofitsiantlar o'sha yerda filial taxtasiga qaraydi, bosh choyxonada esa — bosh taxtaga. Qoida bir xil ("taxtaga qara"), javob — joyiga qarab.

6.2 Nega bu kuchli

var() siz bu ishni qilish uchun footer ichidagi har bir element uchun alohida qoida yozardingiz: footer a, footer p, footer strong... Ertaga footer'ga yangi element qo'shilsa — yana bitta qoida. O'zgaruvchi bilan esa footer "o'z ranglarini" e'lon qiladi, ichidagi hamma narsa o'zi moslashadi.

Qorong'i mavzu (dark mode) ham aynan shunday quriladi: butun sahifa uchun bir guruh o'zgaruvchi qiymati almashtiriladi. Buni Ranglar 3 va Qorong'i rejim darslarida qilamiz.

7. Zaxira qiymat: var(--nom, zaxira)

7.1 O'zgaruvchi topilmasa

var() ga vergul bilan ikkinchi qiymat berish mumkin. U faqat o'zgaruvchi topilmaganda ishlaydi:

.aksiya {
  color: var(--rang-urgu, #b4461a);
}

Bu yerda "--rang-urgu ni ol. Agar u yo'q bo'lsa — #b4461a". Bunday holat ko'pincha qismlarga bo'lingan loyihada uchraydi: bitta sahifa palitrali faylni ulashni unutadi, lekin ranglar baribir to'g'ri chiqadi. Yuqoridagi main va footer natijasidagi kulrang paragraf aynan shunday ishladi.

Zaxira qiymat — faqat shu bitta var() uchun. U o'zgaruvchini e'lon qilmaydi: boshqa qoidadagi var(--rang-urgu) bu zaxirani bilmaydi.

7.2 Vergul tuzog'i

Birinchi verguldan keyingi hamma narsa zaxira hisoblanadi — undagi vergullar ham:

body {
  font-family: var(--shrift-matn, system-ui, sans-serif);
}

Bu yerda zaxira — system-ui, sans-serif degan butun ro'yxat. Chrome'da tekshirdik: o'zgaruvchi yo'q bo'lganda shrift steki to'liq ishladi. Qulay, lekin bitta natijasi bor: var() ga "uchinchi argument" berib bo'lmaydi.

7.3 Zaxira ham, o'zgaruvchi ham yo'q bo'lsa

Chrome'da tekshirdik:

body { color: #b4461a; }
p { color: #2f6b3a; }
p { color: var(--yoq); }

--yoq hech qayerda e'lon qilinmagan, zaxira ham yo'q. Paragraf yashil bo'lmadi — u otasidan qizg'ish rangni oldi. Ya'ni oldingi p qoidasi ham ishlamadi. Nega shunday — keyingi darsning asosiy mavzusi. Hozircha qoida: muhim joyda zaxira qiymat yozing yoki o'zgaruvchi nomini diqqat bilan tekshiring.

8. var() qayerda ishlaydi

• Istalgan xususiyatning qiymatida: color, border, background-color, padding, font-family — hammasida.
• Boshqa o'zgaruvchining qiymatida: --rang-havola: var(--rang-asosiy);. Shunday qilib "havola rangi = brend rangi" degan qaror yoziladi. Ertaga havolalar boshqa rangda bo'lsa, faqat shu qator o'zgaradi.
• Matematik funksiyalar ichida: calc(var(--...) * 2) ham ishlaydi — buni keyingi darsda ko'p ishlatamiz.

Ishlamaydigan joylar:

• Selektorda: var(--x) { ... } — noto'g'ri selektor.
• Xususiyat nomida: var(--nom): red; — bo'lmaydi.
• @media shartida: @media (min-width: var(--kenglik)) — Chrome'da tekshirdik, shart hech qachon bajarilmadi. @media ni Media queries darsida o'rganamiz.

Diqqat: HTML'da style="--rang-asosiy: red" yozish ham mumkin — o'zgaruvchi shu elementning o'zida e'lon qilinadi. Lekin «Bahor»da inline style CSP bilan to'silgan — buni CSS nima darsida ko'rgan edik. O'zgaruvchilar doim asosiy.css da yashaydi.

9. CSS o'zgaruvchisi va Sass'dagi $

Internetda $rang-asosiy: #2f6b3a; ko'rinishidagi kodni ham uchratasiz. Bu — Sass, CSS'ni brauzerga yuborishdan oldin "tayyorlab beradigan" vosita. Uni Sass/SCSS darsida o'rganamiz, hozir bilish shart emas.

Asosiy farq — qachon ishlashi. Sass o'zgaruvchisi faqat kompyuteringizda, fayl tayyorlanayotganda yashaydi. Tayyor CSS faylda $ qolmaydi — hamma joyda #2f6b3a turadi. Brauzer $rang-asosiy degan narsani hech qachon ko'rmaydi. CSS o'zgaruvchisi esa brauzerning o'zida yashaydi.

Sass o'zgaruvchisi — bosmaxonada chop etilgan menyu: xato bo'lsa, qayta chop etasiz. CSS o'zgaruvchisi — bo'r bilan yoziladigan taxta: kun davomida ham o'zgartirsa bo'ladi. Bugun ko'p loyihalarda ranglar CSS o'zgaruvchilarida saqlanadi, chunki ular mavzu almashtirishga imkon beradi.

10. DevTools'da o'zgaruvchilar

DevTools'da CSS darsida Styles panelini ko'rgan edingiz. Istalgan elementni tanlang. Styles'ning pastki qismida "Inherited from html" bo'limi chiqadi — u yerda :root qoidasi va hamma --rang-* qiymatlari turadi. Qoidadagi var(--rang-asosiy) ustiga sichqonchani olib borsangiz, uning hozirgi qiymati ko'rinadi.

Rangni u yerda jonli o'zgartirsangiz, sahifadagi hamma bog'liq joy birga o'zgaradi. Dizaynerga "shu yashil yaxshimi?" deb ko'rsatishning eng tez yo'li.

11. Ko'p uchraydigan xatolar

11.1 var() ichida chiziqchalar yo'q

color: var(rang-asosiy); — Chrome'da tekshirdik, brauzer bu deklaratsiyani butunlay tashlab ketdi va oldingi qoidadagi rang qoldi. Tuzatish: var(--rang-asosiy).

11.2 var() ning o'zi unutilgan

color: --rang-asosiy; — bu rang emas, shunchaki g'alati so'z. Deklaratsiya tashlanadi. Tuzatish: nom doim var() ichida o'qiladi.

11.3 O'zgaruvchi qoidadan tashqarida

--rang-asosiy: #2f6b3a;

h1 {
  color: var(--rang-asosiy, #1f2a24);
}

O'zgaruvchi selektorsiz, fayl boshiga yozilgan. Chrome'da tekshirdik: bu qator keyingi h1 qoidasini ham "yutib" yubordi — brauzer ikkalasini bitta noto'g'ri qoida deb o'qidi va ikkalasini ham tashladi. Tuzatish: o'zgaruvchilar doim biror selektor ichida, odatda :root { ... } da.

11.4 Katta harf yoki imlo xatosi

--rang-asosiy e'lon qilingan, var(--rang-asosy) yoki var(--Rang-asosiy) ishlatilgan. Brauzer xato bermaydi — o'zgaruvchi "topilmadi" holatiga tushadi, xuddi «Zaxira ham, o'zgaruvchi ham yo'q bo'lsa» bo'limidagi kabi. Tuzatish: nomni VS Code taklifidan tanlang, qo'lda yozmang.

11.5 Qiymatga qarab nomlash

--yashil, --katta-qizil — rang o'zgarganda nom yolg'on bo'lib qoladi. Tuzatish: vazifaga qarab nomlang: --rang-asosiy, --rang-urgu.

12. Mashqlar

Mashqlarni kurs/mashqlar/05/ papkasida bajaring.

1-mashq (oson): Hex'ni nomga almashtiring

Stajyor yozgan CSS:

h1 {
  color: #2f6b3a;
}
.narx {
  color: #b4461a;
}
.aksiya {
  color: #b4461a;
  border: 1px solid #b4461a;
}
footer {
  color: #5b6660;
}

Faylning boshiga «Bahor» palitrasining kerakli o'zgaruvchilarini yozing va hamma hex kodni var() bilan almashtiring. Faylda :root dan tashqarida birorta ham hex qolmasin.

Ishora: uchta rang ishlatilgan. Nomlar — «Bahor» palitrasining :root blokidan.

:root {
  --rang-asosiy: #2f6b3a;
  --rang-urgu: #b4461a;
  --rang-ikkinchi: #5b6660;
}

h1 {
  color: var(--rang-asosiy);
}
.narx {
  color: var(--rang-urgu);
}
.aksiya {
  color: var(--rang-urgu);
  border: 1px solid var(--rang-urgu);
}
footer {
  color: var(--rang-ikkinchi);
}

2-mashq (o'rta): Achchiq taomlar kartasi

«Bahor» menyusida achchiq taomlar kartasi class="taom-karta achchiq" bilan belgilangan. Karta qoidalari tayyor:

.taom-karta {
  border: 2px solid var(--rang-asosiy);
  padding: 4px 12px;
}
.taom-karta h3 {
  color: var(--rang-asosiy);
}

Achchiq kartada ramka ham, sarlavha ham urg'u rangida bo'lsin. Shart: .taom-karta va .taom-karta h3 qoidalariga tegmang, border va color ni qayta yozmang — faqat bitta yangi qoida qo'shing.

Ishora: «Lokal qayta aniqlash» bo'limidagi footer kabi — karta ichida o'zgaruvchining qiymatini almashtiring. Ikki class'ni yopishtirish — Asosiy selektorlar darsida.

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-urgu: #b4461a;
  }
  .taom-karta {
    border: 2px solid var(--rang-asosiy);
    padding: 4px 12px;
  }
  .taom-karta h3 {
    color: var(--rang-asosiy);
  }
  .taom-karta.achchiq {
    --rang-asosiy: var(--rang-urgu);
  }
</style>
<article class="taom-karta">
  <h3>Osh</h3>
</article>
<article class="taom-karta achchiq">
  <h3>Lag'mon (achchiq)</h3>
</article>

3-mashq (qiyin): Nega ranglar chiqmadi?

--rang-fon: #fffaf0;

:root {
  --rang-asosiy: #2f6b3a;
  --rang-urgu: #b4461a;
}
body {
  background-color: var(--rang-fon, #ffffff);
}
h1 {
  color: var(--Rang-asosiy);
}
.narx {
  color: var(rang-urgu);
}
.aksiya {
  color: --rang-urgu;
}

1. Hech narsani tuzatmasdan: sahifada qaysi ranglar paydo bo'ladi?
2. Har bir xatoni toping va tuzating.

Ishora: «Ko'p uchraydigan xatolar» bo'limidagi beshta xatoni birma-bir tekshiring. Birinchi qatorga alohida e'tibor bering — u o'zidan keyingi qoidaga nima qiladi?

:root {
  --rang-fon: #fffaf0;
  --rang-asosiy: #2f6b3a;
  --rang-urgu: #b4461a;
}
body {
  background-color: var(--rang-fon, #ffffff);
}
h1 {
  color: var(--rang-asosiy);
}
.narx {
  color: var(--rang-urgu);
}
.aksiya {
  color: var(--rang-urgu);
}

4-mashq: Portfolio qadami — ranglar nom oladi

Portfolio'ning asosiy.css fayli CSS nima darsidan beri bir xil ranglarni qayta-qayta yozadi. Ularni o'zgaruvchilarga o'tkazing.

1. Fayl boshiga :root blokini yozing. Nomlar «Bahor» uslubida: --rang-matn (#1f2a24), --rang-fon (#f7faf8), --rang-asosiy (#1f6f4a yoki o'zingiz tanlagan brend rangi), --rang-ikkinchi (#5b6660), --rang-chegara (#c9d6cf) va --rang-fon-och (#e8f1ec).
2. Fayldagi hex kodlarni tegishli var() ga almashtiring — CSS nima darsidan beri qo'shilgan hamma qoidada. Ikki rang hozircha joyida qoladi: forma xatosining #b4461a i (portfolio palitrasida unga hali nom yo'q) va ::selection dagi #ffffff. Ularni yakuniy loyihada tartibga keltiramiz.
3. Tekshiring: VS Code'da Ctrl + F bilan # belgisini qidiring. Topilgan natijalar faqat :root ichida va shu ikki istisnoda bo'lsin.
4. --rang-asosiy qiymatini vaqtincha boshqa rangga o'zgartirib, saytning hamma sahifasini ko'zdan kechiring. Keyin qaytaring.

Ishora: VS Code'da Ctrl + H — "topish va almashtirish" (VS Code'da tez tahrirlash). Lekin har almashtirishni ko'z bilan tasdiqlang: bir xil hex har doim ham bir xil ma'noda emas.

/* Portfolio palitrasi */
:root {
  --rang-matn: #1f2a24;
  --rang-fon: #f7faf8;
  --rang-asosiy: #1f6f4a;
  --rang-ikkinchi: #5b6660;
  --rang-chegara: #c9d6cf;
  --rang-fon-och: #e8f1ec;
}

body {
  font-family: system-ui, sans-serif;
  color: var(--rang-matn);
  background-color: var(--rang-fon);
}

:where(h1, h2, h3),
a {
  color: var(--rang-asosiy);
}

::selection {
  background-color: var(--rang-asosiy);
  color: #ffffff; /* hozircha — yakuniy loyihagacha */
}

h1 ~ article,
details[name="savollar"] {
  border: 1px solid var(--rang-chegara);
}

h1 ~ article:first-of-type,
details[name="savollar"][open],
a:not([aria-current="page"]):hover {
  background-color: var(--rang-fon-och);
}

details[name="savollar"] summary::marker {
  color: var(--rang-asosiy);
}

footer {
  color: var(--rang-ikkinchi);
}

nav[aria-label="Asosiy menyu"] [aria-current="page"] {
  color: var(--rang-matn);
}

:focus-visible {
  outline: 3px solid var(--rang-asosiy);
}

13. Real ishda

• Katta saytlar ranglar, shrift va masofalarni o'zgaruvchilarda saqlaydi. GitHub'ni oching, DevTools'da html elementini tanlang — Styles panelida yuzlab --... qatorlarni ko'rasiz.
• Tailwind v4 (tayyor class'lar to'plami, kursda alohida o'rganamiz) o'zining ranglar va o'lchamlar to'plamini CSS o'zgaruvchilari sifatida beradi. Bugungi dars uni o'qishga ham yordam beradi.
• Dizayn tizimlari o'zgaruvchilarni qatlam-qatlam quradi: avval xom rang, keyin uning vazifasi (--rang-havola: var(--rang-asosiy)). Bu Dizayn tokenlari darsining mavzusi.
• Intervyuda so'raladi: "CSS o'zgaruvchisi Sass o'zgaruvchisidan nimasi bilan farq qiladi?", "var() ning ikkinchi argumenti nima?", "O'zgaruvchilarni nega :root ga yozamiz?".

Xulosa

• CSS o'zgaruvchisi — -- bilan boshlanadigan maxsus xususiyat; qiymati var(--nom) bilan o'qiladi.
• Nom ma'noga qarab tanlanadi (--rang-urgu), katta-kichik harf farqlanadi.
• O'zgaruvchilar meros bo'lib o'tadi: :root da e'lon qilingani butun sahifaga yetadi.
• Ichki elementda qayta e'lon qilingan qiymat faqat o'sha element va uning ichiga ta'sir qiladi.
• var(--nom, zaxira) — o'zgaruvchi topilmaganda zaxira ishlaydi; birinchi verguldan keyingi hamma narsa zaxira.
• Sass $ faqat tayyorlash vaqtida yashaydi, CSS -- esa brauzerda — merosi, DevTools'i bilan.

Keyingi dars: CSS o'zgaruvchilari 2 — noto'g'ri qiymatli o'zgaruvchi nimaga olib kelishi, zaxira zanjiri, birlik qo'shish, komponent "API"si va o'zgaruvchini JavaScript'dan boshqarish.

Manbalar

• MDN: "Using CSS custom properties (variables)", "var()", "--*" — developer.mozilla.org
• W3C: "CSS Custom Properties for Cascading Variables Module Level 1" — w3.org/TR/css-variables-1
• web.dev: "Learn CSS — Custom properties" — web.dev/learn/css/custom-properties