CSS Variables (Custom Properties)

CSS variables yoki custom properties – bu CSS ichida qayta foydalanish mumkin bo‘lgan qiymatlarni saqlashga imkon beruvchi mexanizm. Ular kodni soddalashtiradi, bir xil rang yoki qiymatlarni turli joylarda ishlatishda qulaylik yaratadi.

Sintaksis

CSS variable yaratishda -- bilan boshlanadi va var() funksiyasi orqali chaqiriladi.

:root {
  --primary-color: dodgerblue;
  --padding: 10px;
}
 
.button {
  background-color: var(--primary-color);
  padding: var(--padding);
}

Izoh:

• :root selektori global scope sifatida ishlaydi.
• Variable’larni faqat var(--variable-name) orqali chaqirish mumkin.

Lokal va global variable

:root {
  --main-bg: lightgray;
}
 
.container {
  --main-bg: pink; /* faqat shu container ichida amal qiladi */
  background-color: var(--main-bg);
}
 
body {
  background-color: var(--main-bg); /* lightgray */
}

Natija:

• body fon rangi – lightgray.
• .container fon rangi – pink.

Fallback qiymat

Agar variable topilmasa, var() ichida fallback qiymat berish mumkin.

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

Agar --text-color aniqlanmagan bo‘lsa, qora (black) rang ishlatiladi.

Variable bilan hisoblash

CSS variable’larni calc(), clamp() kabi funksiyalarda ishlatish mumkin.

:root {
  --base-size: 16px;
}
 
.text {
  font-size: calc(var(--base-size) * 1.5);
}

Natija: Font o‘lchami 24px bo‘ladi.

JavaScript orqali CSS variable boshqarish

CSS variable’larni JS orqali ham o‘zgartirish mumkin:

<div class="box">Salom</div>
 
<style>
:root {
  --box-color: tomato;
}
 
.box {
  background-color: var(--box-color);
  color: white;
  padding: 20px;
}
</style>
 
<script>
document.documentElement.style.setProperty("--box-color", "seagreen");
</script>

Natija: .box elementi yashil fon bilan chiqadi.

Responsive dizaynda variable

:root {
  --space: 8px;
}
 
@media (min-width: 768px) {
  :root {
    --space: 16px;
  }
}
 
.card {
  margin: var(--space);
}

Natija: kichik ekranda 8px margin, katta ekranda esa 16px margin ishlatiladi.

Afzalliklari

• Kodni soddalashtiradi va o‘qilishi oson bo‘ladi.
• Bir marta o‘zgartirish orqali butun loyiha dizaynini boshqarish mumkin.
• JS bilan dinamik boshqarish imkoni mavjud.
• Responsive dizayn uchun juda qulay.

Xulosa

CSS variables — front-end loyihalarda DRY (Don’t Repeat Yourself) prinsipini qo‘llashga yordam beruvchi kuchli vosita. Ular orqali ranglar, o‘lchamlar va boshqa qiymatlarni markazlashgan holda boshqarish mumkin.