Custom properties (or CSS variables) allow to define stylesheet-wide values identified by a token and usable in all CSS declarations.
Custom properties (sometimes referred to as CSS variables or cascading variables) are entities defined by CSS authors that contain specific values to be reused throughout a document.
They are set using custom property notation (e.g., --main-color: black;) and are accessed using the var() function (e.g., color: var(--main-color);).
Example
/* Declaring a variable */
:root {
--main-bg-color: brown;
}
/* Using the variable */
element {
background-color: var(--main-bg-color);
}
