SCSS and CSS Frameworks: A Harmonious Relationship

Using SCSS with CSS frameworks like Bootstrap and Foundation. Customising variables, extending components, and importing only what you need.

Why combine SCSS with a framework?

CSS frameworks give you a solid starting point: grids, buttons, forms, responsive utilities. They can also feel generic and rigid. SCSS lets you override defaults, extend components, and trim the parts you do not use – without forking the whole framework.

Customising frameworks with SCSS

Most modern frameworks ship with SCSS source files. Override variables before importing and your changes propagate through the framework’s components.

Example: customising Bootstrap

Override Bootstrap’s default colours, then import:

// Override Bootstrap default colors
$primary: #4a90e2;
$secondary: #f1c40f;

// Import Bootstrap SCSS
@import 'node_modules/bootstrap/scss/bootstrap';

Your colours replace Bootstrap’s defaults across buttons, alerts, and everything else that references them.

Extending components with mixins

Frameworks include mixins for common patterns. Use them to create variations without rewriting from scratch.

Example: extending a Bootstrap button

@import 'bootstrap/mixins/button-variant';

.my-custom-button {
  @include button-variant(#fff, #333, #ddd);
}

Bootstrap’s button-variant mixin handles the hover and focus states for you.

Making it your own

Using a framework does not mean your site has to look like every other Bootstrap site. Customise variables, override specific components, and add your own styles on top.

Example: custom grid layout

@import 'bootstrap/functions';
@import 'bootstrap/variables';
@import 'bootstrap/mixins';

// Define your custom grid
$grid-columns: 12;
$grid-gutter-width: 30px;

@import 'bootstrap/grid';

Import Bootstrap’s grid with your own column count and gutter width.

Trimming the output

Importing an entire framework loads CSS you may never use. SCSS partial imports let you pull in only what the project needs.

Example: selective Bootstrap imports

// Import only what you need
@import 'bootstrap/scss/functions';
@import 'bootstrap/scss/variables';
@import 'bootstrap/scss/mixins';
@import 'bootstrap/scss/root';
@import 'bootstrap/scss/reboot';
@import 'bootstrap/scss/type';
@import 'bootstrap/scss/images';
@import 'bootstrap/scss/grid';

Smaller compiled CSS, faster page loads.

Filling gaps

Frameworks do not cover everything. When you need a utility or component that is not there, add it in your own SCSS after importing the framework.

Example: custom utility class

@import 'bootstrap/utilities';

// Add a custom utility class
.utility-margin-top {
  margin-top: 2rem;
}

A framework handles the common cases. SCSS handles the project-specific ones. Override variables before importing, extend what is there, and only load the parts you actually need.