CSS o'zgaruvchilar — Custom Properties, var()

~15 daq · CSS · CSS Asoslari

Muammodan boshlaylik

Saytning asosiy rangi — #2563eb (ko'k). U CSS faylda 47 joyda yozilgan: tugmalar, havolalar, chegaralar, ikonkalar, fokus ramkalari. Dizayner aytadi: "Brendni yangiladik, asosiy rang endi binafsha — #7c3aed".

"Find & Replace" qilasiz — 47 ta almashtirish. Lekin 3 joyda bu rang biroz boshqacha yozilgan edi (#2563EB, rgb(37, 99, 235)), ular qolib ketdi. Ertasiga "qorong'i rejim" kerak bo'ladi — endi har bir rangning ikki versiyasi kerak.

Qiymatlarni bir joyda saqlab, hamma joyda ishlatish kerak. Buning uchun — CSS o'zgaruvchilari (Custom Properties).

E'lon qilish va ishlatish

:root {
  --rang-asosiy: #2563eb;
  --rang-matn: #1e293b;
  --radius: 8px;
}

.btn-primary {
  background: var(--rang-asosiy);
  border-radius: var(--radius);
}

a {
  color: var(--rang-asosiy);
}

• E'lon: nomi ikki chiziqcha -- bilan boshlanadi: --rang-asosiy
• Ishlatish: var(--nom) funksiyasi orqali
• :root — sahifaning ildiz elementi (<html>). U yerda e'lon qilingan o'zgaruvchi butun sahifada mavjud

Endi brend rangini o'zgartirish — bitta qator:

:root {
  --rang-asosiy: #7c3aed;
}

47 joy bir zumda yangilandi.

[!INFO] O'zgaruvchi nomlari registrga sezgir: --Rang va --rang — ikki turli o'zgaruvchi. Odatda kichik harflar va chiziqcha ishlatiladi: --color-primary, --space-md.

Zaxira qiymat

.card {
  padding: var(--card-padding, 16px);
}

Agar --card-padding e'lon qilinmagan bo'lsa — 16px ishlatiladi. Zaxira ham o'zgaruvchi bo'lishi mumkin:

color: var(--rang-maxsus, var(--rang-asosiy));

Meros va qamrov — asosiy kuch

O'zgaruvchilar oddiy CSS xususiyatlari kabi meros o'tadi (1-dars) va kaskad qoidalariga bo'ysunadi. Shuning uchun ularni istalgan element uchun qayta e'lon qilish mumkin:

:root {
  --rang-asosiy: #2563eb;
}

.btn {
  background: var(--rang-asosiy);
  color: white;
}

.btn-danger {
  --rang-asosiy: #dc2626;    /* faqat shu tugma va uning ichidagilar uchun */
}

.btn-success {
  --rang-asosiy: #16a34a;
}

.btn qoidasi bitta — ranglar o'zgaruvchi orqali almashadi. Yangi rang turi uchun faqat bitta qator kerak.

Butun bo'limni o'zgartirish:

.promo {
  --rang-asosiy: #f59e0b;
}

.promo ichidagi barcha tugmalar, havolalar va chegaralar — to'q sariq. Ularning CSS iga tegilmadi.

Qorong'i rejim — eng mashhur foydalanish

:root {
  --bg: #ffffff;
  --matn: #0f172a;
  --matn-xira: #64748b;
  --chegara: #e2e8f0;
  --karta: #f8fafc;
}

[data-theme="dark"] {
  --bg: #0b0f19;
  --matn: #f1f5f9;
  --matn-xira: #94a3b8;
  --chegara: #1e293b;
  --karta: #111827;
}

body {
  background: var(--bg);
  color: var(--matn);
}

.card {
  background: var(--karta);
  border: 1px solid var(--chegara);
}

Rejimni almashtirish — <html> ga bitta atribut:

document.documentElement.dataset.theme = 'dark';

Barcha komponentlar o'z-o'zidan yangi ranglarga o'tadi. Bu DevDocs saytining o'zida ham aynan shunday ishlaydi — darslar sahifasidagi oy/quyosh tugmasi.

Operatsion tizim sozlamasiga qarab avtomatik:

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0f19;
    --matn: #f1f5f9;
  }
}

Dizayn tizimi — "tokenlar"

Katta loyihalarda barcha dizayn qarorlari o'zgaruvchilarda saqlanadi — design tokens:

:root {
  /* Ranglar */
  --color-primary: #2563eb;
  --color-danger: #dc2626;

  /* Bo'shliqlar — bir xil qadam */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;

  /* Shrift */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 20px;

  /* Boshqalar */
  --radius-sm: 4px;
  --radius-md: 8px;
  --shadow: 0 4px 12px rgb(0 0 0 / 0.08);
}

.card {
  padding: var(--space-3);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  font-family: var(--font-sans);
}

Natija: sayt bo'ylab hamma narsa izchil — "13px" yoki "17px" kabi tasodifiy qiymatlar yo'q. Dizayner va dasturchi bir xil "tilda" gaplashadi.

calc() bilan

O'zgaruvchilarni hisoblashda ishlatish mumkin:

:root {
  --space: 8px;
}

.section {
  padding: calc(var(--space) * 3);          /* 24px */
  margin-bottom: calc(var(--space) * 5);    /* 40px */
}

Birlik bilan birlashtirish — faqat calc() orqali:

:root { --ustunlar: 3; }

.grid {
  /* ❌ var(--ustunlar)px — ishlamaydi */
  width: calc(var(--ustunlar) * 100px);   /* ✅ 300px */
}

[!WARNING] var() qiymatni matn sifatida "yopishtirmaydi". --olcham: 20; va width: var(--olcham)px — ishlamaydi (brauzer 20 px ko'radi). Birlikni o'zgaruvchining o'ziga yozing (--olcham: 20px) yoki calc(var(--olcham) * 1px) ishlating.

JavaScript bilan

O'zgaruvchilarni JavaScript dan o'qish va o'zgartirish mumkin — bu ularning Sass/LESS o'zgaruvchilaridan asosiy farqi:

const root = document.documentElement;

// O'qish
getComputedStyle(root).getPropertyValue('--rang-asosiy');   // " #2563eb"

// O'zgartirish — butun sahifa darhol yangilanadi
root.style.setProperty('--rang-asosiy', '#7c3aed');

Masalan, sichqoncha joylashuvini CSS ga uzatish:

document.addEventListener('mousemove', e => {
  document.body.style.setProperty('--x', `${e.clientX}px`);
  document.body.style.setProperty('--y', `${e.clientY}px`);
});

.spotlight {
  background: radial-gradient(circle at var(--x) var(--y), #fff3, transparent 200px);
}

JavaScript faqat raqamni yuboradi — qanday ko'rinishini CSS hal qiladi.

Sass o'zgaruvchilari bilan farqi

Sass o'zgaruvchisi kompilyatsiyadan keyin oddiy qiymatga aylanadi va yo'qoladi. CSS o'zgaruvchisi esa brauzerda "tirik" qoladi — shuning uchun qorong'i rejim va mavzular faqat u bilan qulay ishlaydi.

Nima uchun shunday?

Nima uchun CSS o'zgaruvchilari meros va kaskad orqali ishlaydi — oddiy global o'zgaruvchilar sodda emasmi?

Chunki kontekst — CSS ning asosiy g'oyasi. Global o'zgaruvchi faqat "butun saytda bitta rang" deyishga imkon beradi. Merosli o'zgaruvchi esa "bu bo'limda boshqacha", "bu tugmada boshqacha", "qorong'i rejimda boshqacha" deyishga imkon beradi — komponentning CSS kodiga tegmasdan. Komponent faqat var(--rang-asosiy) ni so'raydi; u qayerda turganiga qarab qiymat o'zi keladi. Bu komponentlarni haqiqatan qayta ishlatiladigan qiladi: bir xil tugma ko'k sahifada ko'k, promo blokda sariq, qorong'i rejimda och — va har bir holat uchun alohida class yozish shart emas.

Xulosa

Eslab qoling:

• E'lon: --nom: qiymat; (ikki chiziqcha); ishlatish: var(--nom)
• :root — butun sahifa uchun global o'zgaruvchilar
• Zaxira: var(--nom, 16px)
• Meros va kaskad: istalgan elementda qayta e'lon — faqat uning ichiga ta'sir qiladi
• Qorong'i rejim: [data-theme="dark"] yoki prefers-color-scheme da qiymatlarni almashtirish
• Dizayn tokenlari: ranglar, bo'shliqlar, shriftlar — izchil dizayn
• Birlik bilan — calc(var(--x) * 1px); var(--x)px ishlamaydi
• JavaScript: getPropertyValue / setProperty — jonli o'zgartirish

Keyingi bo'lim

2-bo'lim: Box Model va Matn — content, padding, border, margin va ular qanday hisoblanadi.