CSS Variables

Variables in pure CSS without a preprocessor of any kind are available today in many modern browsers. They allow avoiding much of the repetition involved with traditional CSS:

/* Declaration */
some-element {
  --my-bg-color: #F9EC31;
}

/* Using it */
some-element {
  background-color: var(--my-bg-color);
}

:root

A common use case is to define variables in the :root pseudo-class and then use it anywhere the value is needed:

:root {
  --funky-shadow: 3px 3px 10px brown;
}

.ugly-box {
  box-shadow: var(--funky-shadow);
}

Calc()

You can also use calc() on variable values:

:root {
  --special-padding: 1.5em;
}

.pandora-box {
  padding-bottom: calc(var(--special-padding) + 1em);
}

Browser Support

👉 Myth is a good option to start using CSS variables today.

Can I Use css-first-letter? Data on support for the css-first-letter feature across the major browsers from caniuse.com.

Search

🔎 Searching...