DEV Community

Nazanin Ashrafi
Nazanin Ashrafi

Posted on

What are CSS variables?

If you google What are CSS variables? you'll get answers such as this one :
"Custom properties (sometimes referred to as CSS variables or cascading variables) are entities defined by CSS authors that contain specific values to be reused throughout a document"

To be honest this definition of CSS variables was too confusing for me! like what does that even mean?!

In this article I'm gonna try to simplify it for you.



Here I created a lot of simple shapes with just two colors : pink and powderblue.

P.S I could just use class="circle" or class="square" instead of writing too much codes , but it's just an example , I'm only trying to you show how CSS variables works



So there are lots of
background-color: pink;
background-color: powderblue;
(you can also check the CSS section in pen)

If I were to change the color to something else I had to change the background-color one by one

It would take so much of my time
BUT instead of doing so, we can create a CSS variable for it

Now the question is how to write a CSS variable?

We can do so with the help of pseudo-class, like this :
:root {
--variable's name : property;
}

By declaring a custom property the change will be applied throughout our HTML document

Let's write our code with a variable and apply it to our page

:root {
--square-color : red;
}

.Square {
background-color: var(--square-color);
}

If you change the variable's color from red to any color of your choice, all of the square's color will change and it will save you a lot of of time.
You can play around and experiment with the pen to understand it better.



I've made another pen just to show, you can use other property as well :

Top comments (7)

Collapse
 
gsarig profile image
Giorgos Sarigiannidis • Edited

CSS Variables are absolutely great and much better than the variables functionality of preprocessors like SASS!

That's because a great benefit of CSS variables is that they can be manipulated from JavaScript.
Also, they make the responsive design much easier, as changing the variable on a breakpoint is enough to apply the color change, instead of changing all the instances where it is being used.

As an example, here's a pen I've made some time ago, using those two features: codepen.io/gsarig/pen/xxVzzmY

Collapse
 
nazanin_ashrafi profile image
Nazanin Ashrafi

Thank you for extra info + sharing pen 🙏🌹

Collapse
 
adnanashraf77 profile image
Adnan Ashraf

Thanx for sharing/explaining useful tips.I have learned something new today. Which will save alot of time and energy

Collapse
 
nazanin_ashrafi profile image
Nazanin Ashrafi

Aw thank you I'm glad it was helpful 🙌☺️🙌🌹

Collapse
 
nazanin_ashrafi profile image
Nazanin Ashrafi

Thank you 🌹😊🙌

I might write about that in the future when I have more experience 😅

Collapse
 
ahkshaeyravi profile image
ahkshaeyravi

Nice share

Collapse
 
nazanin_ashrafi profile image
Nazanin Ashrafi

Thank you 🌹🙌