Variables in CSS ka use values (like colors, sizes) store karne ke liye hota hai. Inko var() function se use kiya jata hai. Isse code reusable aur easy to manage ho jata hai.
CSS variables DOM ke through access ho sakte hain, matlab JavaScript aur media queries se bhi change kar sakte ho.
CSS Declare a Variable
Variables in CSS global ya local ho sakte hain:
- Global Variable → poore document me use hota hai (
:rootme declare) - Local Variable → sirf specific selector ke andar use hota hai
Example:
Note:
- Variable name
--se start hota hai - Case-sensitive hota hai
CSS var() Function
var() function variable ki value insert karne ke liye use hota hai.
Syntax:
--name→ variable namefallback→ optional default value
CSS Variables Example
Example:
Sirf variables change karke poora design update ho sakta hai.
Overriding Variables in CSS
Local variable global variable ko override kar sakta hai.
Example:
New Local Variable
Agar ek hi jagah use karna hai, toh new local variable bana sakte ho.
Example:
CSS Variables with JavaScript
Variables in CSS ko JavaScript se change kar sakte ho.
Example:
CSS Variables in Media Queries
Different screen sizes ke liye variables change kar sakte ho.
Example:
Variables in CSS code ko reusable, flexible aur easy to maintain banate hain. Global aur local scope ke through values control kar sakte hain, aur JavaScript ya media queries ke saath dynamic changes bhi possible hote hain.
