Custom Properties and Functions

Create flexible design tokens and calculate values with var, calc, min, max, and clamp.

更新于 2026年8月13日适用于 Modern CSS

Custom properties store values in the cascade. Unlike preprocessor variables, they can inherit, respond to media queries, and change at runtime.

Define tokens by role

tokens.css

01:root {
02  --color-ink: #211a25;
03  --color-accent: #4c1c62;
04  --space-page: clamp(1rem, 4vw, 3rem);
05}
06.page { padding-inline: var(--space-page); color: var(--color-ink); }

A fallback protects optional values: color: var(--course-color, var(--color-accent)).

Calculate within safe limits

sizing.css

01.shell { width: min(72rem, 100% - 2rem); }
02.sidebar { width: clamp(14rem, 22vw, 19rem); }
03.content { min-height: calc(100vh - var(--header-height)); }

min() chooses the smallest candidate, max() the largest, and clamp() constrains a preferred value between bounds.

Keep this

Name tokens by purpose, use the cascade to scope them, and use math functions to replace unnecessary breakpoints.