CSS Variables & Custom Properties Kya Hote Hain?

Apne CSS Code ko Reusable aur Maintainable Banana Sikhein

CSS Variables ka Introduction

CSS Variables, jinko official taur par Custom Properties kaha jaata hai, ek powerful feature hai jo humein CSS me reusable values define karne ki suvidha deti hai. Yeh variables -- (double-hyphen) se shuru hote hain aur ek baar define karne ke baad, inhe poore stylesheet me `var()` function ke through use kiya ja sakta hai.

Inka sabse bada fayda code ko DRY (Don't Repeat Yourself) banana hai. Maan lijiye aapne apni website me ek primary color 50 jagah use kiya hai. Agar aapko woh color badalna ho, toh aapko 50 jagah change karna padega. Lekin variables ke saath, aap sirf ek jagah variable ki value change karenge aur woh har jagah automatically update ho jayega.

CSS Variables Declare aur Use Kaise Karein?

1. Variable Declare Karna

Variables ko declare karne ke liye best practice hai ki unhe :root pseudo-class ke andar define kiya jaaye. :root HTML document ke root element (<html>) ko represent karta hai, jisse yahan define kiye gaye variables "global" ban jaate hain aur poore document me accessible hote hain.

:root {
  --primary-color: #007bff;
  --main-font-size: 16px;
  --default-padding: 15px;
}

2. Variable Use Karna (var() function)

Ek baar define karne ke baad, aap in variables ko var() function ka use karke kisi bhi CSS property me apply kar sakte hain.

body {
  font-size: var(--main-font-size);
  color: var(--primary-color);
}

.container {
  padding: var(--default-padding);
}

Variable Scope (Local vs. Global)

CSS Variables ka scope standard cascading rules follow karta hai.

Global Scope

Jab aap variable ko :root me define karte hain, toh woh globally available hota hai aur use kahin bhi access kiya ja sakta hai.

Local Scope

Aap variable ko kisi specific selector (jaise ek class) ke andar bhi define kar sakte hain. Aise me, woh variable sirf uss selector aur uske child elements ke liye hi available hoga. Isse component-specific theming aasan ho jaati hai.

.alert-success {
  --alert-bg-color: #d4edda;
  --alert-border-color: #c3e6cb;
  background-color: var(--alert-bg-color);
  border: 1px solid var(--alert-border-color);
}

.alert-danger {
  --alert-bg-color: #f8d7da; /* Local variable override */
  background-color: var(--alert-bg-color);
}

Key Takeaways

  • CSS Custom Properties (Variables) se code reusable aur maintainable banta hai.
  • Variables --variable-name syntax se declare hote hain.
  • var(--variable-name) function se unhe use kiya jaata hai.
  • Global variables ke liye :root me declare karein.
  • Local variables specific components ke andar unke scope me hi kaam karte hain.
  • Yeh JavaScript se bhi manipulate kiye ja sakte hain, jo dynamic theming (like dark/light mode) ke liye bohot powerful hai.
Bonus: Practical Application!
Apne webpage par aaj hi CSS variables ka use karke dekhein!

Apne project ke liye :root me primary color aur font size ke variables banayein aur unhe apni CSS me use karein.

Practice in CSS Editor
Test Your Knowledge!
Kya aap CSS Variables ke baare mein seekh chuke hain? Chaliye dekhte hain!

Apni knowledge test karne ke liye is quick quiz ko dein.

Start Quiz