Rajat's Blog

CSS Variables

Rajat Gupta's photo
Rajat Gupta
·

3 min read

Yes, you heard it right: like most programming languages CSS also has variables that once defined can be used throughout the CSS file. They make our work really manageable by giving names to the values of various properties (that in turn, we can use multiple times throughout our CSS).

1.PNG

Let us understand this with the below👇 examples:

Example 1

Now, let us change the background color of box 1 to red by using a CSS variable.

 .box1{
            --primary-color: red;
            background-color: var(--primary-color);
            color: white;
            height: 100px;
            width: 100px;
        }

So, we used double hyphens to declare a CSS variable (--primary-color: red;) and then the keyword var to use it in our code (background-color: var(--primary-color);).

Example 2

Now, let us change the background color of box 2 to red by using the same CSS variable that we have already defined inside the class box1.

 .box1{
            --primary-color: red;
            background-color: var(--primary-color);
            color: white;
            height: 100px;
            width: 100px;
        }
 .box2{
            background-color: var(--primary-color);
            color: white;
            height: 100px;
            width: 100px;
        }

3.PNG

Can you see box 2? I can't.

Since we assigned "red" to the variable name primary-color inside the .box1 class, the name primary-color is not valid inside the .box2 class. However, in order to overcome this issue, we can declare the variable name in the global scope by Including this 👇 root block at the top of the CSS file.

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

Let us again try to give red color to box 2:

:root{
--primary-color: red;
}
 .box1{
            background-color: var(--primary-color);
            color: white;
            height: 100px;
            width: 100px;
        }
 .box2{
            background-color: var(--primary-color);
            color: white;
            height: 100px;
            width: 100px;
        }

4.PNG

Example 3:

It may look as to why we even need the variables as we can give the background-color directly to the box. Here👇 is why we are using it:

  1. When we build actual websites, instead of remembering these property values over and over, it is much more convenient to assign variable names (based on the purpose) and use them wherever required because a website's CSS file is longer and there are many properties (colors, fonts, margins, padding, etc.)

  2. It gives us a superpower when making changes: Instead of changing color (or any other property value) inside each div, we can directly change the color inside the root and we are done.

Let's say I wanna use the below colors👇 (you can't remember these color names) and fonts in my website:

  1. For large text (such as headings): Black Russain (#111827)

  2. For background: DarkTurquoise (#00CED1)

  3. for smaller text: LavenderBlush (#FFF0F5)

  4. for stylish font: 'Pacifico', cursive;

  5. for all other general-purpose fonts: 'Arvo', serif; This list can go on and on for margins, paddings, etc.

Below is a little demo of how to apply the above variables in your code.

:root {
    --heading-color: #111827;       
    --primary-color: #00CED1;  
    --text-color: #FFF0F5;
    --stylish-font: 'Pacifico', cursive;
    --general-font: 'Arvo', serif;
} 

h1, h2, h3, h4, h5, h6{
     font-family: var(--stylish-font)
}

a{
    text-decoration: none;
    color: var(--text-color);
    cursor: pointer;
}

button{
    background-color: var(--primary-color);
    color: var(--text-color);
    border-radius: 1rem;
}

body{
    margin: 0;
    padding: 0;
    background-color: var(--primary-color);
    font-family: var(--general-font);
    display: grid;
    width: 100vw;
}

That's all folks.

If you have any doubt ask me in the comments section and I'll try to answer as soon as possible.

I write articles related to web development. Follow me here if you are learning the same.

my twitter handle: @therajatg

If you are the linkedin type, let's connect: linkedin.com/in/therajatg

Have an awesome day ahead 😀!

CSS