Friendly Introduction to CSS Custom properties (CSS Variables)

We've used preprocessors like Sass and Less to handle dynamic values and variables, and they've helped keep our CSS code organized and much easier to maintain.

These preprocessors has also helped us minimize repetition of code and also increased productivity.

However, dynamic features are growing increasingly in CSS, and now we can use variables natively in CSS. In this article you're going learn what are CSS properties and also how to use them.

Let's get started!

What are CSS Variables?

You've probably hear the word variable or even used them, that's if you're familiar with any programming language. They basically let's you store values.

Let's use the JavaScript programming language for an example:

  
    let myAge = 23;

    let myHeight = 175.5;

    let ageAndHeight = myAge + myHeight;

    console.log(ageAndHeight) // 198.5
  

What I illustrated above is quite straight forward, I stored my age in a variable called myAge and I did the same with my height, then I added them together and stored the sum in the variable ageAndHeight. This is how CSS properties works. They let you store value so they can be called and used over and over again.

How is it done in CSS?

This is how:

  
    :root{
      --brand-color: #CC4E46;
    }
  

To define a variable you just have to use -- followed by the variablethen place a column : and then the value you want to assign. >

Variables defined in the :root{} are global variable which means they would be available every where, but there is also a way to limit a variable, I call it scoping, don't worry we'll talk about it later.

So a typical example if you want to define a global variable would look like this, just assume you want to assign a font-size to a variable:

  
    :root{
      --font-size: 20px;
    }
  

Multiple Properties

  
    :root{
      --font-size: 20px;
      --background-color: #f7f7f7;
      --margin-top: 10px;
      --width: 300px;
    }
  

And the list just goes on...

But how do you use them?

Let's assume you had a HTML markup like this

And you had a CSS custom properties like this

  
    :root{
      --font-size: 20px;
      --main-background-color: #f7f7f7;
      --amazing-padding: 10px;
      --text-color: #333;
      --main-font-family: 'Arial';
    }
  

To apply the styles all you have to do is use the word var() then place the name of the variable inside the parentheses () .

  
    body{
      background-color: var(--main-background-color);
    }
    h1{
      font-size: var(--font-size);
      padding: var(--amazing-padding);
      color: var(--text-color);
      font-family: var(main-font-family);
    }
  

Such a weird syntax! don't worry you'll get use to it :)

Creating Scoped Variables

What are scoped variables? They are variable that only applies to the element that they were assigned for. Which means they wouldn't work outside that scoped element I don't know if that's the correct word, but I'll illustrate more on it Here's an example

Markup

CSS

  
    /* Define box variable (scoped variables) */
    .box {
      --box-color: #2dc997;
      --box-size: 200px;
      --box-font-size: 20px;
    }

    /* Applying the values to the box class */
    .box {
      background-color: var(--box-color);
      width: var(--box-size);
    }

    /* the --box-font-size value will be inherited by the paragraph tag inside of the box class */

    .box p{
      font-size: var(--box-font-size)
    }

  

The styles doesn't only apply to the .box class but every thing inside of it.

If you try to use these styles ouside it will not work. example:

  
    /* Trying to apply the values of the box to the container class. Which won't work */
    .container {
      background-color: var(--box-color);
      width: var(--box-size);
    }

    .container p{
      font-size: var(--box-font-size)
    }

  

This elements will not inherite the styles because the values are limited only to the .box class and the elements inside of it.

Manipulating CSS Variables with JavaScript

It's really interesting that we can manipulate CSS variables with JavaScript.

Let say you have a variable called --box-color with a value of #2dc997 scoped to the .box class in your CSS

  
    .box {
      --box-color: #2dc997;
    }
  

Getting the value of --box-color from your JavaScript would look something like this:

  

    //cache the element you want to target
    const box = document.querySelector('.box');

    //cache styles of box inside the CSS
    const boxStyle = getComputedStyle(box);

    //retrieve the value of the --box-color CSS variable
    const boxColor = boxStyle.getPropertyValue('--box-color');


//log the value
    console.log(boxColor); //#2dc997;
  

Browser Support for CSS Variables

It wouldn't come as a shock that IE11 has no support for CSS variables, but all other major browsers have full support for it.

But there is still a way to make it work for non-supporting browsers.

  
  .box {
    background-color: #333;
  }

  @supports(--css: variables) {
  .box {
  --bg-color: #2dc997;

    background-color: var(--bg-color, '#2dc997');

    }
  }

  

Conclusion

Now the question remains, do we still have need for preprocessors? Well that's a very opinionated topic, because at the end of the day is all falls back to preference.