CSS o‘zgaruvchilari (custom properties): amaliy qo‘llanma

Qisqa javob

CSS o‘zgaruvchilari (rasmiy nomi — custom properties) qiymatni bir marta berib, uni ko‘p joyda ishlatish imkonini beradi. E’lon ikki defis bilan boshlanadi, o‘qish esa var() funksiyasi orqali:

:root {
  --color-primary: #7c3aed;
  --space-m: 1rem;
}

.button {
  background: var(--color-primary);
  padding: var(--space-m);
}

Qiymatni bir joyda o‘zgartirdingiz — barcha tugmalar o‘zgardi. Preprotsessor o‘zgaruvchilaridan farqli ravishda, CSS o‘zgaruvchilari brauzerda yashaydi: ularni alohida bloklar uchun, media so‘rovlarda va JavaScript dan qayta belgilash mumkin.

Sintaksis: nimani bilish muhim

• Nom -- bilan boshlanadi va katta-kichik harfni farqlaydi: --Color va --color — turli o‘zgaruvchilar.
• Qiymat deyarli har qanday narsa bo‘lishi mumkin: rang, o‘lcham, shriftlar ro‘yxati, qiymatning bir qismi.
• O‘zgaruvchi — bu xususiyat, shuning uchun u fayl yuqori darajasida emas, selektor ichida e’lon qilinadi.
• O‘zgaruvchini media so‘rov shartida (@media (min-width: var(--bp)) ishlamaydi) va xususiyat nomida ishlatib bo‘lmaydi.

Ko‘rinish sohasi va meros

Custom properties oddiy kaskadga bo‘ysunadi va avlodlarga meros bo‘lib o‘tadi. :root da e’lon qilingan o‘zgaruvchi hamma joyda mavjud. Komponentda e’lon qilingani — faqat uning ichida.

:root { --accent: #7c3aed; }

.card--warning { --accent: #d97706; }

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

Barcha kartalar sarlavhasi binafsha, ogohlantirish kartasiniki esa to‘q sariq. Komponent bitta o‘zgaruvchini o‘qiydi, «sozlash» esa tashqaridan bo‘ladi. Bu o‘nlab modifikatorlarsiz moslashuvchan komponentlarning asosi.

Media so‘rovlarda ham qayta belgilash mumkin:

:root { --gutter: 1rem; }
@media (min-width: 768px) {
  :root { --gutter: 2rem; }
}

Zaxira qiymatlar

var() ning ikkinchi argumenti — fallback, u o‘zgaruvchi aniqlanmagan bo‘lsa ishlatiladi:

.box { padding: var(--box-padding, 1rem); }

Nozik jihat: fallback noto‘g‘ri qiymatdan himoya qilmaydi. Agar --size: red bo‘lsa va siz width: var(--size) yozsangiz, e’lon yaroqsiz bo‘ladi va xususiyat fallback emas, standart qiymatni oladi. Brauzer buni sintaksis xatosi sifatida ko‘rsatmaydi, shuning uchun bunday xatolarni DevTools da tekshiring.

JavaScript dan o‘zgartirish

Bu Sass oldidagi asosiy afzallik: qiymatlar ish jarayonida o‘zgaradi.

const root = document.documentElement;

// yozish
root.style.setProperty('--accent', '#5b21b6');

// o‘qish
const accent = getComputedStyle(root).getPropertyValue('--accent').trim();

Odatiy holatlar: effektlar uchun kursor joylashuvi, aylantirish progressi, foydalanuvchi tanlagan rang, mavzuni almashtirish. JS bitta o‘zgaruvchini o‘zgartiradi, ko‘rsatish mantig‘i esa to‘liq CSS da qoladi.

Dizayn-tokenlar va mavzular

Dizayn-tokenlar — dizayn-tizimning nomlangan qarorlari: ranglar, oraliqlar, radiuslar, soyalar. CSS o‘zgaruvchilari ularni kodga yetkazishning qulay usuli. Yaxshi amaliyot — ikki daraja:

1. Bazaviy tokenlar — palitra: --violet-600, --gray-100.
2. Ma’noviy tokenlar — rollar: --color-bg, --color-text, --color-accent.

Komponentlar faqat ma’noviy tokenlardan foydalanadi. Shunda qorong‘i mavzu bir nechta rolni qayta belgilashdan iborat bo‘ladi:

:root {
  --color-bg: #ffffff;
  --color-text: #1a1033;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #120b24;
    --color-text: #ede9fe;
  }
}

[data-theme="dark"] {
  --color-bg: #120b24;
  --color-text: #ede9fe;
}

Sass o‘zgaruvchilaridan farqi

Ular raqobatchi emas. Sass yig‘ish bosqichidagi hisob-kitoblar va mixinlar uchun qulay, CSS o‘zgaruvchilari esa ish vaqtida o‘zgarishi kerak bo‘lgan hamma narsa uchun.

Ko‘p uchraydigan xatolar

• Har bir qiymat uchun o‘zgaruvchi ochish — ular yuzlab bo‘lib ketadi va qaysi biri nima uchunligini hech kim eslamaydi.
• Rol kerak bo‘lgan joyda (--color-accent) ko‘rinish bo‘yicha nomlash (--purple) — brend o‘zgarganda nom yolg‘on gapira boshlaydi.
• Bo‘shliqlarni hisobga olmaslik: ayrim brauzerlarda getPropertyValue qiymatni boshida bo‘shliq bilan qaytaradi — trim() qo‘shing.