CSS Variables - Learn CSS Variables in 2022

Hello guy👋. Hope you are doing great? In toady's article we'll talk about CSS Variables. So without wasting time, let's see what is it ??

What are variables ?

Variables are used to store data in it. Think of it like you have a box and you put some books inside it. Then those books are the data and the box is variable in terms of computer science.

Okay, but why we use it ??

Let's take an example to understand why we use variable ?

body { background-color: blue; }

h2 { border-bottom: 2px solid blue; }

.container {
  color: white; 
  background-color: white; 
  padding: 15px;
}

button {
  background-color: white; 
  color: blue;  
  border: 1px solid blue; 
}

If you see the above code, If I say you I don’t want any blue color in website and change that color to green. Even though the last code is very short but still to change the color you’ll have to copy and paste each and evey color line, right ??

So, for exactly this situation we use variable, now think If we just make a variable “color” and store blue in it.

And just code all the color equal to that variable instead of “blue”. If we do this. Now, we just have to change the color in one line and all the color will change itself.

Isn’t its awesome ????

Define variables

We usually define variables in :root selector

Why? If we declare a variable inside root, then we can access it from anywhere in the code but if you define a variable inside any other element you’ll be able to use it within the { }. This is basically known as scope.

Syntax of declaring variable inside :root is

Make sure variable name must start with ( -- ) double dash and it is case sensitive which means “--variable” is not equal to “--VARIABLE”

Access variables

Okay, we defined a variable but how we can access it. For that we have var( ) function in CSS

So, that it now let's see a full example using CSS Variable.

:root{
  --primary-color: blue;
  --secondary-color: white;
}

body { background-color: var(--primary-color);  /*blue color*/}

h2 { border-bottom: 2px solid var(--primary-color);  /*blue color*/}

.container {
  color: var(--primary-color); /*white color*/
  background-color: var(--secondary-color); /*white color*/
  padding: 15px;
}

button {
  background-color: var(--secondary-color); /*white color*/
  color: var(--primary-color);  /*blue color*/
  border: 1px solid var(--primary-color); /*blue color*/
}

So, now if you see the above code, you can use how exactly you can use variables in CSS. And now you can easily, change color with just 1 line.

You can use variable to store any CSS value. Even store whole border value. Isn’t its awesome ?

That’s it. This was all about CSS Variables. I hope you got each and every point. Still if you have any doubt you can ask me in comments or you can contact me on my Instagram.

And if you want to master you web dev skills, you can checkout my YouTube channel. I make very helpful coding tutorials. With that all 😎

Thanks for reading. Have a nice day