Get started with CSS Variables

How to use CSS variables in your projects.

In this CSS Variables Tutorial you’ll learn how to use custom properties to make better, more manageable style sheets. It used to be that you had to use SASS to get the feature of using variables in your web style sheets but that involved having to use some kind of pre-processor to parse your SASS code into CSS. Wouldn’t it be nice if there was a way to use CSS variables without SASS? Well with CSS variables now you can. A CSS variable is actually a custom property in CSS so imagine writing your own CSS language and you’re pretty much have CSS variables. In this tutorial you will learn how to use CSS variables in your code and we’ll go through a simple style sheet and identify the opportunities to add CSS variables. First off, we’ll look at how to define a CSS variable and then walk through how to add it to an existing style sheet. Once updated, you will see how CSS variables can make your life easier.