An introduction to CSS Variables

Originally published on inspiredwebdev.com

Writing CSS may seem like an easy task compared to writing something like JavaScript, at the end of the day, it's just a bunch of styles, right?

Well, that's generally true and unless you are going for very complex layouts or you have specific needs, CSS is fairly easy to pick up and get started with.

Problems may arise when you have a large project and you want to keep your styling consistent throughout all pages.
You may feel like using SASS is a bit too overkill but you still want to be able to define values once and re-use them in multiple places.

This is where CSS Variables will come to help you.

Let's have a look at a basic scenario:

.main-section {
    /* ...other styles */
    background-color: #3498db;
}

.primary-button {
    /* ...other styles */
    color: #3498db;
}

Here we are styling two different classes with a color. If one day we would like to change that color we would have to replace all mentions of it. With CSS Variables we can simplify the code, writing this:

:root {
    --lightblue: #3498db;
}

.main-section {
    /* ...other styles */
    background-color: var(--lightblue);
}

.primary-button {
    /* ...other styles */
    background-color: var(--lightblue);
}

Let's go through what I did here:

• define a variable inside of the pseudo-class :root so that we can use it on every element in our document
• define the variable using the syntax: --NAME: VALUE
• inside of your element, use the variable with the syntax PROPERTY: var(VARIABLE_NAME)

Now, if we want to change that light blue color to a different shade of blue, we only have one place in the code where to do so.

Variables are not limited to colors of course! You can use them for whatever you want.

Box shadows can be quite long to copy paste on different elements, we can use a variable to simplify our life:

:root {
    --shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}

div {
    box-shadow: var(--shadow);
    -webkit-box-shadow:  var(--shadow);
    -moz-box-shadow:  var(--shadow);
}

And if we want to, we can even go further and combine CSS Variables with calc() , a native CSS Function to perform simple calculation.

Let's say we defined our container and header height in variables like this:

:root {
    --container-height: 100%;
    --header-height: 60px;
}

.container {
    heigth: var(--container-height);
}

.header {
    height: var(--header-height);
}

We want our content to always take up as much space as there is left under the header. We can do so by writing this:

.content {
    height: calc(100% - 60px);
}

But what if we want to leverage our variables?

.content {
    height: calc(var(--conainer-height) - var(--header-height));
}

It may seem overkill to do that in a simple project but if your styles start to become more complex and you see yourself copying, pasting and editing values multiple times, it's worth creating variables to make editing quicker,easier and less prone to error since you only have one spot to tweak.

Can i use CSS Variables and calc() ?

The answer is a big YES, you can. Unless you have to provide support for old browsers, these two properties are supported in all modern browsers. You can see the two screenshots below, taken from caniuse.com. If you need support for IE you can use this polyfifll for CSS Variables https://www.npmjs.com/package/css-vars-ponyfill.

Now open the most messy CSS stylesheet you have in your computer and start cleaning it up with the use of variables.

Thank you very much for reading. Follow me on DevTo or on my blog at inspiredwebdev for more.

Get my ebook on Amazon and Leanpub