Questions tagged [css-variables]

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.

–developer.mozilla

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);
}