How to use CSS Variables with Examples

CSS variables are quickly becoming my favorite thing in web development.  The Custom Properties function in CSS3 is nothing new, but it’s finally becoming more widely accepted and supported.  I also include a few examples on how to implement these in ways that I have found useful.

The best way to be efficient in web development is to avoid redundancy.  Using CSS variables for common values that get repeated throughout a stylesheet is a very helpful way to accomplish this.  I’ve also found them extremely helpful when working with margins, paddings, and the calculations thereafter in layouts and media queries.

How To Use CSS Variables

Let’s look into how to use a CSS variable.  The first step is to set the variable name and value.  We do this by declaring it at the beginning of a style sheet in the :root  psuedo element.  This allows the variable to be accessible by all selectors in the stylesheet.  In this example, we are going to set a variable to a common color we may use throughout the stylesheet.

:root {
    --light-blue:#336699;
}

We have now set the variable “light-blue” to a HEX value that I can use throughout the site, like the following example:

.container {
    background: var(--light-blue);
}

Just like that, the background color for that element will become #336699 and if I ever want to change it, I only need to adjust the variable at the beginning of the stylesheet!  I can use the variable in many selectors for various reasons and only need to refer to one place to ever change that value.

There is also an optional second value when using the variable in the event it isn’t provided:

.container p {
    color: var(--light-blue, #336699);
}

So, that’s cool and all, but let’s see some examples of how this can be really helpful.

Examples of CSS Variables

Let’s say I have a theme and having consistent spacing is incredibly important.   Well, I can declare a CSS variable for that spacing and re-use it throughout the theme stylesheet:

:root {
    --spacing: 32px;
}

.container {
    padding: var(--spacing) 0;
}

p {
    margin: var(--spacing) auto;
}

Let’s take a look at what’s happening here.  I want the spacing of the elements to always be 32 pixels, so I declare my “spacing” variable and then re-use it in a few places.  You can use the variables as one part of the property value, much like I am in both declarations, to make them even more flexible.  The paragraphs will have a property of margin: 32px auto;  and the container will have a property of padding: 32px 0;.

To dive even deeper — there’s a good chance I am going to want to change this value on smaller devices/screens.  Thanks to the flexibility of this function, I can change it through a media query and never have to declare new stylesheet rules!

@media all and (max-width:720px) {
    :root {
        --spacing: 16px;
    }
}

Now, on devices smaller than 720px, the paragraphs will have a property of margin: 16px auto;  and the container will have a property of padding: 16px 0;.   We’ve updated a property on multiple elements on the site with a single stylesheet rule.  How cool is that??

And if you’re wondering, yes, you can have multiple variables with multiple media queries:

:root {
    --blue: #336699;
    --spacing: 1em;
}

@media all and (max-width:720px) {
    :root {
        --blue: #2163A5;
        --spacing: 0.9em;
    }
}

Even more helpful, you can include variables as part of another function like calc()  or another stylesheet value:

:root {
    --spacing: 48px;
    --blue: #336699;
}

.container {
    padding: calc(var(--spacing) / 2);
    border: 2px var(--blue) solid;
}

The padding for the container will now become 24px (because we divided it in half) and there will be a 2 pixel solid blue border with the color we specified around the element.

IE fallback

Unfortunately, not every browser supports CSS variables.  Most notably, Internet Explorer.  I still come across clients who want this browser compatibility so here is your fallback: Find + Replace!  Haha, just kidding, but seriously — I often develop a site using CSS variables, spare myself valuable time avoiding redundancy, and then find and replace the variable with the value in a text editor or IDE.  It’s stupid and it’s simple.

Conclusion

The possibilities are absolutely endless for CSS variables which is why they have become such a favorable tool for developers.  They’ve become part of my workflow more and more.  On almost every project I find another method of using them which saves me valuable time and typing!

Hope that helps! Happy coding!

Leave A Comment

Your email address will not be published. Required fields are marked *