DEV Community

Cover image for CSS Variables and How To Use Them
Shahed Nasser
Shahed Nasser

Posted on

CSS Variables and How To Use Them

A lot of people don’t know about CSS variables, and you might be one of them! It’s time to learn about CSS variables and how you can use them.

CSS variables are declared for a specific element as a custom property. Then, you can use that custom property anywhere you use that element.


Declaration and Usage

Here’s how you declare a custom property:

element { 
    --background-color: #f00;
}
Enter fullscreen mode Exit fullscreen mode

Here, element can be a selector of any element, for example, div, p, .test, etc…

What we did is that we declared a custom property for this element called --background-color . All CSS custom properties must start with -- .

Now, we can use this custom property inside element using the var function.

element {  
    background-color: var(--background-color);
}
Enter fullscreen mode Exit fullscreen mode

Here, we assigned the background-color property of element to the variable we declared earlier.

This is nice and all, but usually we have repetition inside different elements, not just one. declaring a custom variable inside one element type is not very convenient.

In order to use a custom property inside more than one element type, we can declare the custom property inside the :root pseudo-class.

:root {  
    --primary-color: #333;
}
Enter fullscreen mode Exit fullscreen mode

Now, we can use the variable --primary-color inside any element in our document:

div {  
    color: var(--primary-color);
}
p {  
    background-color: var(--primary-color);
}
.fancy {  
    border-color: var(--primary-color);
}
Enter fullscreen mode Exit fullscreen mode

By declaring our custom property inside :root , we are now able to use it inside div to set the text color, p to set the background color, and any element having class fancy to set the border color. This way, not only did we minimize repetition, but we also made it easier to edit and change our website’s primary color at any given point.


Inheritance

Elements can also inherit custom properties. For example, let’s say we have the following HTML:

<div class="parent">
    <div class="first-child"></div>  
    <div class="second-child"><div>
</div>
Enter fullscreen mode Exit fullscreen mode

Then, we declare a variable called --text-size on .parent :

.parent {  
    --text-size: 15px;
}

Enter fullscreen mode Exit fullscreen mode

Now, we can use --text-size not only inside .parent , but also inside its children as well:

.first-child {
 font-size: var(--text-size);
}
Enter fullscreen mode Exit fullscreen mode

We can also override custom properties. We can do that by redeclaring the custom property inside the child element:

.second-child {  
    --text-size: 30px;
}
Enter fullscreen mode Exit fullscreen mode

Now, if you use --text-size inside .second-child , it’ll be evaluated to 30px, but if you use it inside .first-child or .parent, it will still be 15px.


Fallback Values

You can also define a fallback value for a variable by passing a second parameter to var . For example:

.second-child {  
    font-size: var(--text-size, 30px);
}
Enter fullscreen mode Exit fullscreen mode

Fallback values are used when the variable is not defined yet. They are not used as a fallback to browser incompatibility.


Conclusion

And that’s how you can use CSS variables! Keep in mind that some browsers like Internet Explorer don’t support them, so if you need to support all browsers you need to take that into consideration.

This article was originally posted on my personal blog

Top comments (2)

Collapse
 
andrewbrown profile image
Andrew Brown 🇨🇦

My hardest decision is how to name my classes lol.

Collapse
 
mrkbr profile image
Mario Kober

The best about them comparing it to sass vars is the ability to define new values inside media queries.