Motivation

Variables are a common feature of most programming languages. To give an example of why variables in CSS can be useful, consider the following scenario:

When programming the UI for an application, you have picked a set of colors suitable to the constraints relating to the UI design of your web app. Following best practices, you then compose a few of your chosen colors into a theme, to provide a consistent look for your application.

In this scenario, you may need to change a certain color used across your application. This is not easy, if your application is large with its CSS source files running more than, say, 20,000 lines of code. To complete this task without variables, you would need to run several find and replace operations on your code editor, an uphill task prone to error.

You realize that using variables could simplify things for you...

You could define your color with a meaningful name in one place, and refer to it in several other places. This would reduce repetition, and improve readability in your CSS code base. To replace your color with a new value, you need to change the definition of color once. Now, every place where the color is referenced in your application would get updated to the new value simultaneously!

How would you start including them in your CSS, you wonder...

In this tutorial, we will learn important concepts related to CSS variables. Let’s dive in!