Blog

CSS Variables & Custom Properties Kya Hain?

CSS Variables, jise Custom Properties bhi kaha jata hai, ek tarika hai jisme hum CSS me reusable values define kar sakte hain. Yeh variables -- (double hyphen) ke sath start hote hain aur ek baar define karne ke baad, inhe multiple jagah use kiya ja sakta hai.

Yeh maintainability aur flexibility badhane ke liye kaafi useful hote hain, kyunki agar aapko kisi color, font-size ya kisi aur property ko badalna ho, toh aap sirf variable ki value change karenge aur woh har jagah automatically update ho jayega.

CSS Variables Ko Declare Karna

CSS Variables ko declare karne ka matlab hai ki hum ek reusable value define karte hain jo multiple jagah use ki ja sakti hai. CSS mein variables ko -- ke saath define kiya jata hai aur :root pseudo-class ke andar likhna best practice hota hai.

Example:

:root {
  --primary-color: blue;
  --font-size: 16px;
}

Iske baad in variables ko kisi bhi CSS property mein var() function ka use karke apply kiya jata hai:

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

CSS variables responsive design aur theme customization ke liye useful hote hain. Yeh code ko modular aur easily maintainable banate hain.

CSS Variables Ka Use Karna

CSS Variables ek powerful feature hai jo hume ek hi jagah par values define karne aur unhe multiple jagah reuse karne ki suvidha dete hain. Yeh -- se start hote hain aur var() function ke through access kiye ja sakte hain. Inka use karne se code modular, readable aur easily maintainable ho jata hai. Yeh especially bade projects me helpful hote hain jisme colors, fonts ya spacing repeatedly use hoti hai. CSS Variables dynamically update kiye ja sakte hain bina pura CSS code change kiye. Yeh :root pseudo-class me define kiye jate hain taki pura document inhe access kar sake.

Example:

button {
  background-color: var(--primary-color);
  color: white;
  font-size: var(--font-size);
}

Yahaan button ka background color --primary-color ke equal hoga, aur text ka size --font-size jitna hoga.

CSS Variables Ki Scope (Local vs Global Variables)

Scope ka matlab hota hai ki ek variable kahan tak accessible hai.

• Global Variables: Agar hum variables :root me define karte hain, toh woh pure document me accessible hote hain.
• Local Variables: Agar hum kisi specific selector ke andar variable define karte hain, toh woh sirf usi selector ke andar accessible hoga.

Example:

.card {
  --card-bg: lightgray;
  background-color: var(--card-bg);
  padding: 20px;
}

Is case me, --card-bg sirf .card class ke andar hi kaam karega, baaki kahin nahi.

CSS Variables ek powerful feature hain jo code ko maintainable, readable aur reusable banate hain. Yeh DRY (Don’t Repeat Yourself) principle ko follow karne me madad karte hain aur large projects ke liye kaafi useful hote hain.

Quiz: Test Your Knowledge on CSS Variables & Custom Properties

Bonus: Practical Application!

Aaj hi apne webpage par CSS Variables & Custom Properties ka istemal karke dekhein!

CSS variables ko sahi tareeke se samajhne ke liye different properties jaise :root, scope, fallback values, aur dynamic theming ka upayog karein aur apne webpage ke styling ko aur bhi flexible aur maintainable banayein.