bootstrap-with-sass.md

Bootstrap with Sass

Outcome

You'll:

• Be able to import bootstrap via Sass.
• Be able to modify the default style of Bootstrap by overriding the bootstrap Sass variables.

Prerequisites

• Sass, webpack

Advice

The bootstrap css files you've been importing into your projects are actually generated using Less. There is a sister project to generate the css using Sass.

The Sass for the bootstrap project is split into various files. You can see the files here. Particularly the main file and variables file.

Previously we've been overriding little bits of CSS here and there to change the style of bootstrap's default colors, font-sizes, fonts etc..

Now we can override some of those variables and control the exact theme of our site 😃

Learning materials

Core

• Sass variables Have a skim.
• Less variables In a nicer format than above, the names are the same / similar.

Tasks

• Skim through the Sass/Less variables to get an idea of the kind of things you can modify (EVERYTHING!).
• Checkout the sample webpack-bootstrap project.
  • Look at main.scss, _bootstrap.scss and _variable_overrides.scss.
  • In _variable_overrides.scss modify:
    • Default font
    • Primary brand color