Extract from SitePoint Article "Bootstrap Sass Installation and Customization" by Reggie Dawson
Bootstrap is a popular, open source framework. Complete with pre-built components it allows web designers of all skill levels to quickly build a site.
The only drawback I can find to Bootstrap is that it is built on Less. Less is a CSS preprocessor, and although I could learn Less, I prefer Sass. Normally the fact that it is based on Less would exclude me as a user of Bootstrap, as I do no write plain CSS anymore. Fortunately Bootstrap now comes with a official Sass port of the framework, bootstrap-sass. If you are not familiar with Bootstrap implementing the Sass version can be a little tricky. In this article I will show you how to configure and customize Bootstrap with Sass.
Installation
There are multiple ways to obtain and install bootstrap-sass
Download
You can download bootstrap-sass from the Bootstrap download page. Once you have it downloaded extract the contents of the file to the folder you are going to create your project in.
Compass
If you are using Compass then you’ll have Ruby installed. With Ruby installed we can use gems, in this case the bootstrap-sass gem. To install:
gem install bootstrap-sass
If you have an existing Compass project and want to add bootstrap-sass, run this command:
compass install bootstrap -r bootstrap-sass
If you want to start a new Compass project with bootstrap-sass use:
compass create my-new-project -r bootstrap-sass --using bootstrap
We can also install it with the package manager Bower. To me this option is the best as the other options install a lot of ‘fluff’ that will confuse someone not familiar with Bootstrap. To install with Bower make sure you are in the folder where you want to create your project and run:
bower install bootstrap-sass
Configuration
Once we have installed our desired version of bootstrap-sass we need to configure our project. The type of install we performed will determine where the files we need are located.
Download
The download includes a lot of folders that we will not need if we aren’t using Rails. The only folder we need is the assets folder. We can copy the contents of this folder to the root of our project or use it as is. If you intend to use Javascript components you will have to manually download jQuery.
Compass
Using the Compass version creates a styles.scss and _bootstrap-variables.scss file. Folders for fonts, javascript, sass, and stylesheets are created. The important thing to note is that styles.scss imports Bootstrap as a whole, there is no way to pick and choose what Bootstrap components you want to use. You will also have to download jQuery.
Bower
An install from Bower includes everything you need for Bootstrap, even jQuery. All components installed are located in the bower_components directory.
Setup
Once we have Bootstrap installed we need to setup our project to use it. The first thing we want to do is create folders for sass and stylesheets (the Compass setup has already created these). The sass folder will hold our scss files while stylesheets will be where compiled css will be stored. After that create a file named app.scss inside the sass folder. If we are using Compass this file has already been created as styles.scss