Anthony

A Friendly Introduction to CSS Variables

A Friendly Introduction to 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.

What are CSS variables?

You’ve probably heard 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;
  console.log(myAge, myHeight) //result 23, 175.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 did a console.log(). which will output 23 and 175.5. Basically, this is how CSS custom properties works. They let you store value so they can be called and used over and over again. Cool right?

Declaring a variable

element{
  --main-color: #f5f5f5;
}

Using the variable

element{
  background-color: var(--main-color);
}

In most cases you’ll see the properties declared inside the root, like this

:root{
  --main-color: #f5f5f5;
}

Variables defined in the :root are global variables, which means they would be available every where, but there is also a way to limit a variable, they are called scoped variables. We’ll talk more on it towards the end of this article.

Multiple Properties

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

Using them is quite straight forward

    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 :)

Scoped Variables

What are scoped variables? Basically, they are variable that only applies to the element that they were assigned for. Which means they wouldn’t work outside that scoped element. A basic example

Markup

   <div class="box">
      <p>Hey! am a text inside a box</p>
    </div>

CSS

   .box {
      --box-color: #2dc997;
      --box-size: 200px;
      --box-font-size: 20px;
    }

Apply the values to the box class

    .box {
      background-color: var(--box-color);
      width: var(--box-size);
    }

Inheritance

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

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

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 we still have a way to make it work for non-supporting browsers, if we want. Let’s help those 4 people that still uses IE

 .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? Yes we do, While CSS(3) is becoming a more dynamic syling language, with the introduction of grid, advanced selector, webfonts etc and CSS custom properties being one of its cool features, there are still limitations.

With preprocessors like Sass and Less we have tons of features, things that we would not be able to do with just pure CSS. I’m talking about fetures like prefixing parent selector references, variable expansion in selectors, control directives, list data type, defining custom functions, keyword arguments etc. So yes we still need them, atleast for now.

comments powered by Disqus