CSS Variables & Functions in CSS

From the CSS cheat sheet · Custom Properties & Functions · verified Jul 2026

CSS Variables & Functions

Define reusable values with custom properties and use calc, clamp, min, max

css

:root {
  --color-primary: #3b82f6;
  --spacing: 1rem;
  --radius: 8px;
}

.btn {
  background: var(--color-primary);
  padding: var(--spacing);
  border-radius: var(--radius);
}

.container {
  width: min(100% - 2rem, 1200px);
}

💡 CSS variables cascade and inherit — override them in any scope for easy theming

⚡ clamp(min, preferred, max) replaces min-width + max-width + media queries in one line

📌 var(--name, fallback) provides a default value if the variable is not defined

🟢 Use @media (prefers-color-scheme: dark) with variable overrides for system dark mode

variablescustom-propertiescalcclamp

More CSS tasks

Dark Mode & Theming

Back to the full CSS cheat sheet