Chapter 16 — CSS O'zgaruvchilari

---

16.1 --variable va var()

Example

styles.css
CSSNusxalash
01:root {
02  --primary-color: #3b82f6;
03  --spacing-unit: 8px;
04}
05.button {
06  background: var(--primary-color);
07  padding: calc(var(--spacing-unit) * 2);
08}

16.2 Scope va Dark Mode

Example

styles.css
CSSNusxalash
01:root { --bg: white; --text: black; }
02[data-theme="dark"] { --bg: #1a1a1a; --text: white; }
03body { background: var(--bg); color: var(--text); }

⚠️ Common Mistake
CSS o'zgaruvchilarini SASS/LESS o'zgaruvchilari bilan aralashtirib yuborish — CSS custom properties RUNTIME'da (brauzerda) ishlaydi va JavaScript orqali dinamik o'zgartirilishi mumkin, SASS o'zgaruvchilari esa faqat COMPILE vaqtida.

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task: :rootda 3 ta rang o'zgaruvchisini e'lon qiling va ularni turli elementlarda ishlating.

🟡 Exercise 2 — Medium

Task: calc(var(--spacing) * N) yordamida bir nechta har xil o'lchamdagi spacing klasslarini yarating.

🔴 Exercise 3 — Hard

Task: To'liq dark/light mode tizimini CSS variables orqali yarating, JavaScript bilan data-theme atributini almashtiradigan tugma qo'shing.

---

🐛 Debugging Challenge

styles.css
CSSNusxalash
01.card { background: var(--card-bg); }

Your Task: --card-bg o'zgaruvchisi hech qayerda e'lon qilinmagan. Nima bo'ladi?

<details> <summary>Solution</summary> Brauzer bu xususiyatni e'tiborsiz qoldiradi (yoki agar `var()`ning ikkinchi argumenti — fallback — berilmagan bo'lsa, xususiyat "invalid" hisoblanadi). Yechim: `background: var(--card-bg, white);` — ikkinchi argument fallback qiymat sifatida ishlatiladi. </details>

---

📌 Chapter Summary

CSS custom properties (--variable) var() funksiyasi orqali ishlatiladi, :rootda global miqyosda e'lon qilinadi. Ular runtime'da "jonli" bo'lib, dark mode kabi dinamik tema tizimlari uchun juda foydali.

🎯 Key Takeaways

• CSS variables runtime'da JavaScript orqali ham o'zgartirilishi mumkin
• var(--name, fallback) — ikkinchi argument xavfsizlik uchun fallback beradi
• Dark mode uchun [data-theme] yoki .dark klass orqali o'zgaruvchilarni qayta belgilash standart naqsh

⚡ Quick Cheat Sheet

styles.css
CSSNusxalash
01:root { --name: value; }
02.el { property: var(--name, fallback); }
03[data-theme="dark"] { --name: dark-value; }

---