Variables in calc()

Variables with calc()

Combine variables with calc() to derive values mathematically.

Example

:root { --base: 16px; --gap: 1rem; }
h1 { font-size: calc(var(--base) * 2.5); }
.grid { gap: var(--gap); padding: calc(var(--gap) * 2); }

CSS

Full Editor

Pro Tip

Build a full type scale from a single base size using calc() and variables.