Using Bootstrap 3 With Sass

Bootstrap comes with Responsive Grids, and a few common web components that we can pick up to build a responsive website quickly. If you have seen our previous posts on Bootstrap, you probably know that Bootstrap styles are composed using LESS.

While LESS has become more powerful with new features introduced in version 1.5, some of you might be more familiar with Sass/SCSS. There may also be some features in Sass that you can’t live without, but they are not present in LESS (yet). If you want to work on Boostrap and with Sass, thanks to Thomas McDonald, you can because Bootstrap has been ported to Sass/SCSS.

Recommended Reading: A Look Into: Foundation 4 Responsive Framework

Installation

There are a few ways to start using Bootstrap + Sass. First, since it has been included as a Ruby gem, you can install it through Terminal with the following command line:

 gem install bootstrap-sass

You can also use it along with Compass with this command below. It’s the same way as how we install Zurb Foundation. But, please note that this way will only include the _variables.less containing Bootstrap variables, and styles.less where you put your own style-rules.

 compass create my-new-project -r bootstrap-sass --using bootstrap

Alternatively, you can simply download it from the Github repo.

What’s New in Bootstrap 3

Here are a few new features found in Bootstrap 3.

Flat Design

The change that you can immediately see from the new version, Bootstrap 3, is that it is now embraces flat design. The gradients, and shadows that we found in the previous version components are now gone.

Grid in Bootstrap 3

Bootstrap also introduces a set of new classes and new grid constructions. In version 3, there are Large, Medium, Small, and Extra Small Grids to cater to different viewport sizes. Let’s see the following HTML example:

 <div class="container"> <div class="row"> <div class="column col-md-4 col-sm-6"> <p>Left Column</p> </div> <div class="column col-md-4 col-sm-4"> <p>Middle Column</p> </div> <div class="column col-md-4 col-sm-2"> <p>Right Column</p> </div> </div> </div>

We have three columns. Each column has an equal width when viewed in a large viewport size (on a desktop screen or landscape orientation on the tablet). The size is applied with col-md-4 class.

Then, when the screen size is getting smaller the column width division will be adjusted with the col-sm-* class, so that column width could remain in the right proportion rather than just being stacked, like in the previous version of Bootstrap.

New Components

There are also some new Components added in version 3. This includes Pager (used for building Next-and-Prev type of navigation), List Group, Panels, and Page Header.

Utilizing Sass Functions

Technically, we can just add Bootstrap classes to the HTML elements to make the website layout, as we did in the example above. But, when using CSS Pre-processors, like Sass, we can utilize some of the functions to achieve a cleaner and more semantic HTML structure rather than being stuffed with meaningless class names.

Given the previous example, we can change the structure as well as class names to something like this:

 <div class="container"> <div class="main-area"> <div class="column content"> <p>This is the Content.</p> </div> <div class="column sidebar"> <p>This is the Sidebar.</p> </div> <div class="column side-nav"> <p>This is the Navigation.</p> </div> </div> </div>

Within the stylesheet, we can use Sass @extend directive to build the layout. Using @extend will group the selectors that share the same style-rules.

 .main-area { @extend .row; } .column { @extend .col-md-4; } .content { @extend .col-xs-6; @extend .col-sm-6; } .sidebar { @extend .col-xs-4; @extend .col-sm-4; } .side-nav { @extend .col-sm-2; @extend .col-sm-2; }

Alternatively, you can also use Sass @include which will copy and include the style-rules from mixins into our class selectors.

 .main-area { @include make-row; } .content { @include make-xs-column(6); @include make-sm-column(6); } .sidebar { @include make-xs-column(4); @include make-sm-column(4); } .side-nav { @include make-xs-column(2); @include make-sm-column(2); } .column { @include make-md-column(4); }

Now, view it on the browser and you will get your responsive layout.

Conclusion

Bootstrap and Sass definitely make a great combo. With Bootstrap, you can build a functioning responsive website in just a few hours. And features in Sass like @extend and @include can help us write leaner, programmable, and maintainable CSS. For more on Sass, you can refer to this article: Getting Started With Sass: Installation And The Basics.

So, have you tried Bootstrap + Sass?