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

Defining Custom Properties: the –* family of properties

Custom properties: CSS variables — MDN

var() — MDN

Using CSS custom properties (variables) — MDN

You can read more of my articles on my blog.