Strategies for customization with Sass

Depending on your own experience and ideas, you can choose different strategies to reuse Bootstrap's Sass code to create your custom CSS code. Each strategy has its own cons and pros and depending on your needs you can use one or more of these strategies together to reach your targets.

In this book, I will demonstrate usages of each strategy and try to show you alternatives if applicable.

Using variables for customization

As you already know, variables enable you to define commonly used values at a single place. Bootstrap ships with a long list of variables, found in scss/_variables.scss.

These variables are well organized and documented. Let's take the $brand-primary variable as an example; it is used to assign some other variables too. In Bootstrap's scss/_variables.scss file, you will find:

$link-color:                 $brand-primary !default; 
$component-active-bg:        $brand-primary !default; 
$btn-primary-bg:             $brand-primary...