27-dars

O'zing nomla

1. CSS variable nima?

👉 CSS variable (custom property) — bu CSS ichidagi o'zgaruvchi. 👉 Rang, spacing, font-size, theme — hammasi shu bilan boshqariladi.

:root {
  --accent: #4f46e5;
}

button {
  background: var(--accent);
}

1️⃣ Nega CSS variable kerak bo'ldi?

Oldin:

color: #4f46e5;
border-color: #4f46e5;

❌ Takror ❌ Theme yo'q ❌ Refactor qiyin

Hozir:

--accent: #4f46e5;

👉 bitta joydan boshqariladi

2️⃣ CSS variable qayerda e'lon qilinadi?

Global (eng ko'p ishlatiladi)

:root {
  --color-text: #222;
  --color-bg: #fff;
}

📌 :root = html, lekin ustunroq

Component scope

.card {
  --radius: 12px;
  border-radius: var(--radius);
}

👉 Faqat .card ichida ishlaydi

3️⃣ Qanday qiymatlar saqlanadi?

CSS variable faqat rang emas:

--gap: 1rem;
--radius: 8px;
--shadow: 0 4px 12px rgba(0,0,0,.1);
--font-base: 1rem;

👉 Hamma CSS value bo'lishi mumkin.

4️⃣ var() qanday ishlaydi?

color: var(--color-text);

Agar yo'q bo'lsa:

color: var(--color-text, #000);

👉 ikkinchi qiymat — fallback

5️⃣ CSS variable runtime'da ishlaydi 😎

Bu juda muhim farq:

• SCSS variable → build time
• CSS variable → runtime

:root {
  --accent: blue;
}

.dark {
  --accent: red;
}

👉 Class o'zgardi → rang o'zgardi 👉 JS minimal

6️⃣ CSS variable va currentColor birga ishlashi

.button {
  color: var(--accent);
  border-color: currentColor;
}

7️⃣ CSS variable inheritance (hint)

Hozir faqat tushuncha:

body {
  --text: #222;
}

.card {
  color: var(--text);
}

👉 Card ichida ishlaydi

8️⃣ Real mini design system misol

:root {
  --color-bg: #fff;
  --color-text: #222;
  --color-accent: #4f46e5;

  --space-sm: .5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
}

👉 Bu allaqachon design system.

2. CSS variable inherit qilinadimi?

1️⃣ CSS variable — default holatda inherit qilinadi

CSS variable'lar meros oladi (inherit).

body {
  --text-color: #222;
}

p {
  color: var(--text-color);
}

👉 p ichida ishladi, sababi:

CSS variable parent'dan keladi

2️⃣ Bu nimani anglatadi amalda?

👉 Variable qayerda e'lon qilingan bo'lsa:

• o'sha element
• va uning barcha child'lari ko'radi

.card {
  --accent: blue;
}

.card button {
  color: var(--accent);
}

👉 Button blue bo'ladi.

📌 Bu — scope + inheritance birga ishlayapti.

3️⃣ Oddiy property bilan farqi

Oddiy property:

.card {
  color: red;
}

.card button {
  color: black;
}

👉 Child override qiladi — tamom.

CSS variable'da esa:

.card {
  --text: red;
}

.card button {
  color: var(--text);
}

👉 Agar override qilmasang — yuqoridan kelaveradi

4️⃣ Override qilish qanday ishlaydi?

:root {
  --accent: blue;
}

.dark {
  --accent: red;
}

button {
  background: var(--accent);
}

👉 .dark ichida:

• --accent qayta aniqlanadi
• barcha child'lar uchun yangilanadi

📌 Bu — theme mexanizmining asosi.

5️⃣ Variable topilmasa nima bo'ladi?

color: var(--unknown);

❌ Bu ishlamaydi → property bekor qilinadi.

Shuning uchun fallback:

color: var(--unknown, #000);

6️⃣ Inheritance = dinamik tizim

Mana real kuchi:

:root {
  --radius: 6px;
}

.card {
  border-radius: var(--radius);
}

.modal {
  --radius: 12px;
}

👉 .modal .card ichida:

• radius = 12px
• boshqa joyda = 6px

📌 JS yo'q. CSS o'zi hal qildi.

7️⃣ CSS variable vs SCSS variable

Xususiyat	CSS variable	SCSS variable
Inherit	✅ Ha	❌ Yo'q
Runtime	✅ Ha	❌ Yo'q
Theme	✅ Oson	❌ Qiyin
JS bilan	✅ Oson	❌ Yo'q

📌 Shuning uchun:

Theme = CSS variable

8️⃣ Eng ko'p uchraydigan xato ❌

Junior shunday qiladi:

.card {
  --color: blue;
}

.other {
  color: var(--color);
}

❌ Ishlamaydi.

Sabab:

• .other .card ichida emas
• inheritance yo'q