by Vincent Humeau

A cheatsheet to help you remember CSS custom properties

CSS custom properties, also known as CSS variables, represent custom properties that can be declared and be called in your CSS.

Declare a custom property in CSS

To declare a Custom property in your CSS, you need to use the -- syntax:

:root { --colorPrimary: hsla(360, 100%, 74%, 0.6); }

Notice the :root pseudo-class selector — we can declare our variables globally using it. We can also declare them using other selectors, and they will then be scoped in those.

.theme-dark { --colorPrimary: hsla(360, 100%, 24%, 0.6); }

Use a custom property in CSS

To use a CSS custom property in your CSS, you can use the var() function:

:root { --colorPrimary: tomato; } .theme-dark { --colorPrimary: lime; } body { background-color: var(--colorPrimary); }

In this case, body will have a background colour of tomato, but a body.theme-dark of lime.

Use custom properties without units

CSS custom properties can be declared without units if they are used with the calc() function.

:root { --spacing: 2; } .container {   padding: var(--spacing) px; /*Doesn't Work 😫*/   padding: calc(var(--spacing) * 1rem); /*Will output 2rem 😃*/ }  

Use custom properties with JavaScript

To get a custom property, we can use the following:

getComputedStyle(element).getPropertyValue("--my-var"); 
// Or if inline element.style.getPropertyValue("--my-var");

To update the custom property value:

element.style.setProperty("--my-var", newVal);

Example of getting and replacing values

In the following example, we use the dat.gui controller library to change the value of --scenePerspective, --cubeRotateY, and --cubeRotateX custom properties. This method makes it easier to apply a new style, as you do not have to apply inline style on each DOM element.

Thanks for reading!

Resources

Originally published at vinceumo.github.io on February 20, 2019.