Bootstrap Sass Installation and Customization
PreviousSpicing Up the Bootstrap Carousel with CSS AnimationNextUsing Sass to Semantically Extend Bootstrap
Last updated
Was this helpful?
Last updated
Was this helpful?
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.
It is worth noting that the upcoming version of Bootstrap, Bootstrap 4, will use Sass by default. Until it's released, unless you want to use the alpha version versions of bootstrap 4, you'll need to use bootstrap-sass.
There are multiple ways to obtain and install bootstrap-sass.
If you have an existing Compass project and want to add bootstrap-sass, run this command:
If you want to start a new Compass project with bootstrap-sass use:
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.
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.
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.
An install from Bower includes everything you need for Bootstrap, even jQuery. All components installed are located in the bower_components directory.
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.
The app.scss file (or styles.scss in Compass) is used to import bootstrap components. For example:
Download
Compass
Bower
The next thing we want to do is navigate to the Bootstrap folder and find the stylesheets folder. Inside of stylesheets there is a bootstrap folder. Copy the _variables.scss file to your sass folder. Rename the file to _customVariables.scss. Add an import statement for _customVariables.scss to app.scss. Make sure to import _customVariables.scss first for reasons I will explain in a moment.
If you are using Compass you can skip this step as the _bootstrap-variables file serves the same purpose. The file has already been imported into styles.scss for you. If you are using Compass with Bower it is advisable to import bootstrap-compass.scss.
The last import is an optional _custom.scss file. Many people will include custom css rules directly after their import statements or in their app.scss file, but I prefer to separate any custom rules into their own partial. At any rate our app.scss should have three import statements now (or four if using Compass).
Notice we import our _customVariables.scss file first. The reason being is all of Bootstrap's variables are set to default! values,so we need to override these values by importing our variables first.
When we edit variables it is advisable to make a copy of the original and change the copy. After copying, comment out the original variable. That way we can go back to what it was previously set to in case we don't like the result. For example lets say we wanted to change the base font size to 20px.
Firstly we will look in our _customVariable.scss file. The variables are broken down by section, we are looking for the Typography section. There we want the $font-size-base:14px !default; variable. Copy and paste and comment out the original. After that it is as simple as changing the value to 20px.
As you can see I have commented out the original variable and changed the copy.
When trying to customize Bootstrap bear in mind there are a lot of variables to deal with. When looking for a variable to change it is advisable to make full use of your text editors search feature. It is also a good idea to look over the _customVariables.scss file and get familiar with the variables present.
Another effective method for finding what variables you need to change is to look at the raw SCSS files that make up Bootstrap before they are compiled. From there we can see what variables are used in that module. For example lets say I am not happy with the color of the .navbar-default element. Instead of me trying to figure out what variable I need to change I can look inside of the _navbar.scss file. I scroll down (or use my search function) to find a reference to a color variable.
From looking at this rule I determine the variable I need to change is $navbar-default-bg. I would then go into my _customVariables.scss and copy/comment out original variable and create my own.
From this mixin we can see what variables affect our row. We now know we can alter the $grid-gutter-width to make changes to the margins of a row. Also we see that the clearfix mixin has been included. We can also look that over to see what that affects.
Using Bootstrap can be complicated especially for someone that is not familiar with the framework. With the methods I demonstrated you should be able to get Bootstrap setup with Sass and customize the framework with ease. Finding the variables you need to change should be more manageable now that you know what to look for.
Just remember your text editors search functions are your friend, and when in doubt looking at the mixins can help.
You can download bootstrap-sass from the page. Once you have it downloaded extract the contents of the file to the folder you are going to create your project in.
If you are using then you'll have Ruby installed. With Ruby installed we can use gems, in this case the bootstrap-sass gem. To install:
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 make sure you are in the folder where you want to create your project and run:
When using bootstrap-sass you also have the advantage of being able to use and look at the mixins included with Bootstrap. My first for Sitepoint was about 5 useful mixins in Bootstrap, so it's no secret I am a fan of the Bootstrap mixins. Not only will they help with understanding how Bootstrap fits together, they may actually help you build your site. For example looking at @mixin make-row:
