What is the role of _variables.scss in Bootstrap theming?

The _variables.scss file acts as Bootstrap's master configuration containing all customizable design tokens including colors, spacing, typography, grid breakpoints, and component dimensions. Developers create custom Sass files that override these $variable: value !default declarations before importing Bootstrap to generate project-specific CSS. This single-source approach ensures consistent theming across all components from buttons to navbars without scattered CSS overrides. Proper override order (custom vars → functions → variables → bootstrap) prevents compilation errors and enables easy framework upgrades.

Example:-

Code

// custom-bootstrap.scss
$primary:       #6610f2;
$secondary:     #6c757d;
$spacers:       (0: 0, 1: 0.5rem, 2: 1rem, 3: 1.5rem, 4: 2rem);
$grid-breakpoints: (sm: 576px, md: 768px, lg: 992px, xl: 1400px);

@import "../node_modules/bootstrap/scss/bootstrap";