Learn CSS Variables in 5 minutes
A quick tutorial on how to get started.
CSS Custom Properties (also known as Variables) is a big win for front-end developers. It brings the power of variables to CSS, which results in less repetition, better readability and more flexibility.
Plus, unlike variables from CSS preprocessors, CSS Variables are actually a part of the DOM, which has a lot of benefits. So they’re essentially like SASS and LESS variables on steroids. In this article I’ll give your a crash course on how this new technology works.
I’ve also created a free and interactive 8-part course on CSS Variables, so check it out if you want to become an expert on this subject.
Why learn CSS Variables?
There are many reasons to use variables in CSS. One of the most compelling ones is that it reduces repetition in your stylesheet.
In the example above it’s much better to create a variable for the #ffeead color than repeating it, like we’re doing here:
Not only will this make your code easier to read, but it gives you more flexibility as well, in case you want to change this color.
Now this has indeed been possible with SASS and LESS variables for years. However, there are a few big benefits with CSS Variables.
- They don’t require any transpiling to work, as they’re native to the browser. So you don’t need any setup to get started, as you do with SASS and LESS.
- They live in the DOM, which opens up a ton of benefits, which I’ll go through in this article and in my upcoming course.
Now let’s get started learning CSS Variables!
Declaring your first CSS Variable
To declare a variable, you first need to decide which scope the variable should live in. If you want it to be available globally, simply define it on the :root pseudo class. It matches the root element in your document tree (usually the <html> tag).
As variables are inherited this will make your variable available throughout your entire application, as all your DOM elements are descendants of the <html> tag.
:root {
--main-color: #ff6f69;
}As you can see, you declare a variable just the same way you’d set any CSS property. However, the variable must start with two dashes.
To access a variable, you need to use the var() function, and pass in the name of the variable as the parameter.
#title {
color: var(--main-color);
}And that’ll give your title the #f6f69 color:
Declaring a local variable
You can also create local variables, which are accessible only to the element it’s declared at and to its children. This makes sense to do if you know that a variable only will be used in a specific part (or parts) of your app.
For example, you might have an alert box which uses a special kind of color which aren’t being used other places in the app. In that case, it might make sense to avoid placing it in the global scope:
.alert {
--alert-color: #ff6f69;
}This variable can now be used by its children:
.alert p {
color: var(--alert-color);
border: 1px solid var(--alert-color);
}If you tried use the alert-color variable somewhere else in your application, for example in the navbar, it simply wouldn’t work. The browser would just ignore that line of CSS.
Easier responsiveness with variables
A big advantage CSS Variables is that they have access to the DOM. This isn’t the case with LESS or SASS as their variables are compiled down to regular CSS.
In practice this means that you can, for example, change the variables based upon the width of the screen:
:root {
--main-font-size: 16px;
}media all and (max-width: 600px) {
:root {
--main-font-size: 12px;
}
}
And with those simple four lines of code you have updated the main font size across your entire app when viewed on small screens. Pretty elegant, huh?
How to access variables with JavaScript
Another advantage of living in the DOM is that you can access the variables with JavaScript, and even update them, for example based upon used interactions. This is perfect if you want to give your users the ability to change your website (such as adjusting font size).
Let’s continue on the example from the beginning of this article. Grabbing a CSS Variable in JavaScript takes three lines of code.
var root = document.querySelector(':root');
var rootStyles = getComputedStyle(root);
var mainColor = rootStyles.getPropertyValue('--main-color');console.log(mainColor);
--> '#ffeead'
To update the CSS Variable simply call the setProperty method on the element in which the variables has been declared on and pass in the variable name as the first parameter and the new value as the second.
root.style.setProperty('--main-color', '#88d8b0')This main color can change the entire look of you app, so it’s perfect for allowing users to set the theme of your site.
Browser support
Currently, 77 percent of global website traffic supports CSS Variables, with almost 90 percent in the US. We’re already using CSS Variables at Scrimba.com for a while now, as our audience is pretty tech savvy, and mostly use modern browsers.
Ok, that was it. I hope you learned something!
If you want to learn it properly, be sure to check out my free CSS Variables course at Scrimba.
