Introduction

Don’t we all love variables:)

Variables! Variables!! Variables!!!

We all love variables.

const TEN_TIMES = 10

var verySmartFunction = function(){}

let killerVariable = "none"

Every decent programming language has the support for variables, and for years we have used them to do our bidding. Sadly, CSS has lacked support for native variables from the very beginning.

You write CSS? Then no variables for you. Well, except you were using a preprocessor like SASS.

Preprocessors like SASS sell the use of variables as a big add-on. A decent reason to try them. You know what? It’s a pretty darn good reason.

The web is moving fast, and gladly CSS now supports variables.

Offically, they are called Custom Properties but everyone kind of loves the simple name, CSS variables.

Don’t you?

While preprocessors support a lot more features, the addition of CSS variables is a good one. It moves the web (perhaps , CSS) even closer to the future.

Let me show you how variables work natively in CSS.

NB: There’s a bit of javascript in some of the lessons in this section. I do my best to explain them well, but I hope you’re comfortable with Javascript.