Using variables in CSS

27 Jun, 2020

When styling your web app, you've probably found yourself copying hex colour codes, margin parameters or other styles to several elements to achieve a consistent design across your app. This will almost always result in a lot of repeated code that can become a pain if site-wide design tweaks are needed later on.

Thankfully, it doesn't have to be this way. Introducing CSS custom properties! (aka Variables!).

Custom properties allow you to specify just about whatever you want in a re-usable variable. If you have a common accent colour used across your site. A custom property could be created with the HEX/RGB colour value to be used wherever needed. Now if you decide to change the accent colour of your site, you only need to change the value of the custom property.

Note: Custom properties are supported in most modern browsers except internet explorer. Click here for details.

Like most things in CSS, custom properties will be confined to the scope of the selector they are defined in. If we want a custom property to be accessible anywhere, then it can be defined within the ":root" pseudo-class.

Syntax
A custom property looks pretty much like any other CSS property but they begin with two hyphens like, '--colour-variable'. The variable name itself is up to you. However, it should be noted that they are case sensitive.


:root {
	--accent-color: red;
}
			

This accent colour variable can then be used via the following syntax.


header{
	background-color: var(--accent-color);
}
			

Usage
Custom properties are very flexible in terms of what you can specify. They can handle multi-attribute values, for example, the creation of a variable to store a transition.


:root {
	--main-button-transition: all .25s ease;
}

button{
	transition: var(--main-button-transition);
}

button:hover{
	transform: scale(1.3);
}
			

Fallback
Backup values can be set using var in case the referenced variable doesn't exist.


header{
	/* The color blue will be used if the variable is unavailable */
	background-color: var(--accent-color, blue);
}
			

Dynamic Change
Variables can also be changed on the fly, either with a CSS media query or via JavaScript.


media screen and (max-width: 700px) {
	/* Target the root pseudo-class */
	:root {
		/* Change accent-color variable to brown */
		--accent-color: brown;
	}
}
			

// Target the root pseudo-class
const root = document.documentElement;
// Change accent-color variable to green
root.style.setProperty('--accent-color', 'green')
			

CSS custom properties are an immensely helpful tool in writing more readable and easier to maintain stylesheets. Be sure to play around with them in your next project.


Other Tutorials

View All

Building a custom chromecast web app

html - javascript


Chromecasts make streaming your favourite songs, games and movies easy. But if you're like me, you might be wondering what's going on behind the scenes when you cast an app, and how you can build your own.

Five practical .htaccess tricks

apache - php


Apache's '.htaccess' has some very powerful tools that you can use with minimal effort to enhance the user experience and even performance, of your website.

Immersive Parallax scrolling effect

javascript - css - html


You might have noticed while moving along in a car or train, how far away objects seem to move across your vision slower than those closer to your eyes. This effect is known as parallax and its a fundamental aspect of vision which can often go unnoticed.