Bootstrap SASS installation and customization

Bootstrap is a very popular, open source framework with lot of pre-built components. It is perfect to designers who want to create websites quickly. Bootstrap is built in Less, although I know Less, I prefer Sass. Fortunately Bootstrap now comes with the official Sass port the framework. In this article I will show how to install and configure Bootstrap with Sass.

Installation
You can download Bootstrap SASS in the official web page. Extract the content in the folder you are going to create your project in.

If you are using Compass, you have to install the gem with this command:

If you have an existing project and you want to add Bootstrap Sass, you need to run this command:

Finally, to create a new compass project with Bootstrap Sass, you need to run this command:

I prefer Bower to install Bootstrap Sass. Make sure you are in the folder where you want to create your project and run this command:

Setup
Once Bootstrap is installed in your project, you need to create a styles.scss file and import Bootstrap. If you are using Compass, this file has already been created.

For example if you downloaded Bootstrap Sass:

If you are using Compass:

Finally, with Bower:

The next thing we want to do is navigate to Bootstrap folder and copy the _variables.scss file to your sass folder. Rename the file to _customVariables.scss. Import this file before Bootstrap for reasons I will explain in a moment.

The last import is optional, it includes the custom rules which override Bootstrap default styles. Create a file named _custom.scss in your sass folder, and import it after Bootstrap:

Customize
In your _customVariables.scss file, you can change the default values of Bootstrap variables.
For example, the default value of the font-size is 14px. You can change this value in this file, simply changing the value for another you want.

With this line of code, you are changing the default font size of your entire project. Very useful.

There are lots of variables you can change, check this link to see that.

Conclusion
Using Bootstrap can be complicated for no tech people (designers). With this methods you can install and customize the framework easily and quickly. You only need to change the variables and add some customization if you want.