CSS Custom Properties (Variables) Explained

CSS custom properties (informally “CSS variables”) brought real runtime variables to CSS — unlike Sass variables, they’re live in the browser and can be changed with JavaScript or media queries.

:root {
    --primary-color: #3858e9;
    --spacing-unit: 8px;
    --border-radius: 4px;
}

.button {
    background: var(--primary-color);
    padding: calc(var(--spacing-unit) * 2);
    border-radius: var(--border-radius);
}

/* Redefine per-context - variables cascade like any other property */
.dark-theme {
    --primary-color: #7c9eff;
}

@media (max-width: 600px) {
    :root { --spacing-unit: 4px; } /* one change updates everything using it */
}

Because custom properties resolve at runtime in the browser (not compile time like Sass variables), you can change them dynamically with JavaScript — a genuinely powerful pattern for theming, user-controlled settings, or animation, that a Sass-only stylesheet simply can’t do.