How do you declare and use a variable in CSS?

CSSJunior~1 min read

CSS variables are declared with --name inside any selector (most often in :root), and used with var().

Declaration:

css

:root {
  --main-color: #4a90e2;
  --padding: 16px;
}

Usage:

css

button {
  color: var(--main-color);
  padding: var(--padding);
}

--main-color and --padding are custom CSS variables, and var() substitutes their value.

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.