CSS variable chapter three "local variable" 😮

Hello my dear friends

In the last DEV post, we have learned about "CSS override"

CSS variable chapter two "how to override CSS variable" 🤹‍♂️

🚩 Atul Prajapati 🇮🇳 ・ Mar 11 '21 ・ 1 min read

#css #tutorial #todayilearned #codepen

In this DEV post, we'll learn about CSS local variable, it means which is not :root global variable :)

CSS local variable is used to make changes locally at some specific section of the web pages.

Aaaaaab, Imagine like we want to change our navbar colour only by a local variable. So to do this we have to create a local variable for the navbar like this.

#navbar {
    --nav-green: green;
}

And use like this

#navbar a {
    color: var(--nav-green);
}

Note: keep in mind that we can use this variable only of navbar means for local.

To clear your all confusions play around with this codepen project.

Ok, that's it for this DEV post and in the next DEV post, we will learn about "theming" in the CSS variable.

If you have any questions or doubts about CSS local variable you can comment below, maybe we can learn something new from your doubts.