CSS Variables (Custom Properties)

CSS variables, formally custom properties, are values you define with a name starting with two dashes, such as --brand: #0a66c2, and read with the var() function. They follow the cascade and inheritance like other properties, so they can be redefined on any element.

Why it matters

Unlike Sass variables, which are replaced at build time, custom properties exist in the browser. JavaScript can change them, media queries can override them and a component can set a local value that its children inherit. That makes theming, dark mode and design tokens practical in plain CSS without regenerating stylesheets.

Example

:root {
  --brand: #0a66c2;
  --gap: 1rem;
}
.card {
  padding: var(--gap);
  border-color: var(--brand, gray);
}
.card.warning { --brand: #b45309; }

The second argument to var() is a fallback used if the property is undefined. The .warning card gets a different border color with no extra rules.

Common mistakes

Expecting variables to work inside media query conditions; var() cannot be used there.
Forgetting that custom properties inherit, so a value set deep in the tree does not affect ancestors.
Using them for values that never change, adding indirection for no gain.
Typos in names fail silently and produce an invalid value at computed time.

Get notified when this term updates

Plus occasional practical tips on uptime and monitoring, nothing else. Unsubscribe anytime.

यह पेज सामान्य जानकारी है, जिसे हमारी संपादकीय टीम ने लिखा है और दस्तावेज़ीकरण बदलने पर अपडेट किया जाता है। सर्वर और प्रदाता अलग-अलग होते हैं, इसलिए बदलाव पहले सुरक्षित तरीके से जाँचें। देखें: संपादकीय नीति और अस्वीकरण.