What Is CSS Custom Properties (Variables)?
CSS custom properties — commonly called CSS variables — are entities defined by CSS authors that contain specific values to be reused throughout a document. Declared with a double-dash prefix (--variable-name) and accessed via the `var()` function, CSS variables enable dynamic theming, consistent design tokens, and easier maintenance of colour systems, spacing scales, and typography settings across a stylesheet.
Declaring and using CSS variables
Variables are declared in a selector scope — most commonly `:root` for global scope: `:root { --primary: #1abc9c; --spacing-md: 1.5rem; --font-body: 'Inter', sans-serif; }`. They're accessed with `var()`: `background-color: var(--primary)`. Variables inherit through the DOM — you can redefine them on a child element to override values within that subtree.
CSS variables vs Sass variables
CSS custom properties are runtime variables — they can be changed by JavaScript, vary based on media queries, and work in the browser without a build step. Sass variables ($primary: #1abc9c) are compile-time constants — they produce a fixed value in the output CSS and cannot be changed after compilation. Use CSS variables for themes, dynamic values, and anything that needs to change at runtime. Use Sass variables for build-time configuration.
CSS variables in Bootstrap 5
Bootstrap 5.2+ uses CSS custom properties extensively — all colours, spacing, and component-level values are exposed as variables on `:root`. This makes Bootstrap themes easier to customise: override `--bs-primary`, `--bs-font-sans-serif`, or component-specific variables without touching Bootstrap's source Sass files. Canvas Builder generated HTML can be themed by overriding Bootstrap CSS variables.
CSS Custom Properties (Variables) & Canvas Builder
Canvas Builder generates Bootstrap 5 HTML that uses CSS custom properties for colours and component values — making generated pages easy to re-theme by overriding a handful of CSS variables.
Try Canvas Builder →