CSS variables are entities defined by CSS authors that contain specific values to be reused throughout a document. Variables or CSS Custom Properties for Cascading Variables have a precursor of sorts in curentcolor. Currentcolor sets the current color as a variable with that name. It was originally introduced by Opera. Various CSS preprocessors are popular because they implemented variables.

Variables save time and help in the organization of complex documents. It is part of the computer programer’s ethic known as DRY or don’t repeat yourself. Create a variable for colors used in developing the website. To change a color only the definition has to be updated. CSS variables work like any other CSS custom property, like normal CSS properties. CSS variables can be used almost everywhere there are values, including in @media queries.
The variable is defined by -- dash dash, like an empty prefix. Think of it as -webkit- without webkit. The variable is case sensitive and defined as a :root pseudo-class . For example: :root { --main-color: orange;}.

The variable is then applied as a value: background-color: var(--main-bg-color);