CSS customs properties – Cheatsheet

This note was originally posted on my DevNotes
CSS customs 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 as well declare them using other selectors, they will be then be scoped in these ones.
.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 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, –cubeRotateX custom properties. This method makes it easier to apply a new style, as do not have to apply inline style on each Dom elements.

Resources

Defining Custom Properties: the –* family of properties
Custom properties: CSS variables – MDN
var() – MDN
Using CSS custom properties (variables) – MDN

@vince_umo
vincent-humeau.com

Link: https://dev.to//vinceumo/css-customs-properties—cheatsheet-4iec