Reading Snippets [32 => CSS]

Custom properties contain specific values to be reused in a document.

Custom property notation (e.g., --main-color:black;) is used to set custom properties.

Declaration of custom property on the :root pseudo-class allows for use where needed throughout a document.

The var() function is used to access custom properties.

Example:

Declaring a custom property:

element {
  --main-bg-color:brown;
}

Using the custom property:

element {
  background-color:var(--main-bg-color);
}

Source:Developer.Mozilla