Sass in Frameworks

Bootstrap Sass Customization

Bootstrap 5 ships with Sass source files. Override variables before importing Bootstrap to customize colors, spacing, and breakpoints. Bootstrap uses !default flags so your values take precedence.

Import order matters: your variable overrides, then Bootstrap functions, then Bootstrap variables, then components. Skipping this order means your overrides are ignored.

• Import only the Bootstrap components you use to reduce output
• Bootstrap theming docs list all customizable variables
• Use Bootstrap utility API for custom utility generation

// Custom Bootstrap build
$primary: #2563eb;
$border-radius: 8px;
$font-family-base: 'Inter', system-ui, sans-serif;

@import 'bootstrap/scss/functions';
@import 'bootstrap/scss/variables';
@import 'bootstrap/scss/maps';
@import 'bootstrap/scss/mixins';
@import 'bootstrap/scss/root';
@import 'bootstrap/scss/buttons';
@import 'bootstrap/scss/card';

Building Custom Frameworks

Design systems often start as Sass libraries — tokens, mixins, and base components packaged for consumption. Structure as a npm package with a main entry point and documented API.

Expose a configuration map that consumers override. Use @use "your-lib" with ($primary: red) for project-specific theming without forking the library.

// @your-org/design-system
// _config.scss
$primary: #2563eb !default;
$radius: 8px !default;

// Consumer project
@use '@your-org/design-system' with (
  $primary: #dc2626,
  $radius: 4px,
);

Component Systems

Build components as Sass partials with variant maps. A button component reads from a $button-variants map to generate all size and color combinations programmatically.

This map-driven approach means adding a new variant is a data change, not a code change. Designers can propose new variants by updating the map.

$button-variants: (
  'primary': (bg: $primary, color: white),
  'ghost':   (bg: transparent, color: $primary),
);

@each $name, $props in $button-variants {
  .btn--#{$name} {
    background: map.get($props, bg);
    color: map.get($props, color);
  }
}

Theme Customization

Multi-theme systems compile separate CSS files per theme or use CSS custom properties for runtime switching. Compile-time themes produce smaller per-theme files. Runtime themes enable user preference without extra downloads.

The hybrid approach generates CSS custom properties from Sass maps — compile-time token validation with runtime theme switching.

$themes: (
  'light': (bg: #fff, text: #1e293b),
  'dark':  (bg: #1e293b, text: #f1f5f9),
);

@each $name, $colors in $themes {
  [data-theme='#{$name}'] {
    @each $prop, $value in $colors {
      --color-#{$prop}: #{$value};
    }
  }
}

Framework Integration Patterns

In React, Vue, or Angular projects, import the compiled CSS globally and use component-scoped styles for overrides. Avoid importing Sass partials inside every component — compile once at the project level.

CSS Modules and Sass compose well: name your module files Component.module.scss and use @use for shared tokens within them.

// Button.module.scss
@use '../abstracts/variables' as *;

.button {
  background: $primary;
  border-radius: $radius;
}