HTML & CSS
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

Bower

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

The app.scss file (or styles.scss in Compass) is used to import bootstrap components. For example:

Download

@import "bootstrap-sass-3.3.4/assets/stylesheets/bootstrap";

Compass

@import "bootstrap";

Bower

@import "../bower_components/bootstrap-sass/assets/stylesheets/bootstrap";

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).

@import "customVariables";
@import "../bower_components/bootstrap-sass/assets/stylesheets/bootstrap";
@import "../bower_components/bootstrap-sass/assets/stylesheets/bootstrap-compass";
@import "custom";

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.

Customize

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. First 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.

//$font-size-base:14px !default;
$font-size-base:20px !default;

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.

// Default navbar
.navbar-default {
    background-color: $navbar-default-bg;
    border-color: $navbar-default-border;

.navbar-brand {
    color: $navbar-default-brand-color;
    &:hover,
    &:focus {
    color: $navbar-default-brand-hover-color;
    background-color: $navbar-default-brand-hover-bg;
    }
}

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.

When using bootstrap-sass you also have the advantage of being able to use and look at the mixins included with Bootstrap. My first article 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:

@mixin make-row($gutter: $grid-gutter-width) {
    margin-left:  ($gutter / -2);
    margin-right: ($gutter / -2);
    @include clearfix;
}

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.

Conclusion

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.

  • http://learnforweb.wordpress.com Shuvo Islam

    Thanks for sharing such an easy and understandable information about Bootstrap! By using bootstrap, We can save our time to design a website. I’ve found a blog that shared such a nice information about Bootstrap time saving works. Those who are using Bootstrap, It may help you: https://learnforweb.wordpress.com/category/css/bootstrap/

  • atpod git

    Thank you for the easy way to understand bootstrap Sass customization

  • Mekaeil Andisheh

    Thanks

  • moimichel

    Thanks. Very effective article. Well written.

  • Peter Leong

    Ugh! I’m a complete noob and still don’t know how to generate the final .css files. I was bumbling my way with ‘bower’.

    • JoaoReynolds

      The author fails to mention how to use compass: You can run `compass watch` or `compass compile`. See: http://compass-style.org/help/. I personally usually use grunt to do other stuff including handle my scss files.

  • Acing Ae

    By using this method, I wonder, is it possible or a way only to load specific variables? like only the grid system and some of the components?

    • JoaoReynolds

      Instead of doing `@import “../bower_components/bootstrap-sass/assets/stylesheets/bootstrap”;` you can import each component individually found in `/assets/stylesheets/bootstrap/` Just make sure you import the mixins and variables first.

  • Tom

    Is there any advantage or need to use Compass if I have Ruby and Sass already set up within Mac OS X? I’m just getting started with Bootstrap. I know PHP but not Ruby or Sass, so, I don’t want to complicate things further by having to learn another intermediary tool unless it will greatly simplify the process. Thanks!

  • Stanislas T

    thank you for all your work ! I use codekit it’s very effective for the set up of bootstrap and sass. I love how it let you code with all your devices instantly !

  • Lucille

    Thank you! I compile with Koala. This way I compile to my ‘css’ folder instead of generating a ‘stylesheet’ folder. It’s always nice to see other workflows. Well done.

  • Gonzalo2683

    Hi, I’m using version bower

    When I create a copy of the _variables.scss and _custom_vars.scss name change, the original file _variables.scss _custom_vars.scss trumps my file that imports it directly. I think the way to overwrite the variables is not done this way.

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in Front-end, once a week, for free.