Bootstrap + SASS = ♥

Bootstrap is the most popular CSS framework currently. It allows to quickly create pretty websites (tastes and colors …). To do this, simply include the link to the CDN in your site and consult the documentation to create in a few minutes a first page with a header and content in several columns, all responsive course.

In the end you quickly find ourselves with HTML looking like:

<div class="container row">
    <div class="col-md-4 col-sm-2">Neque porro quisquam est qui dolorem</div>
    <div class="col-md-4 col-sm-6">Nemo quaeso miretur, si post exsudatos</div>
    <div class="col-md-4 col-sm-3 text-center">excipere unum pro universis</div>
</div>

As you can see, this one contains html and Bootstrap-specific classes explicitly describing the rendering. I am not at all adept at that. Normally a web page is broken down into 3 parts:

• Content: HTML
• Style: CSS
• Code: JavaScript

Of course, there is an overlap between these 3 parts, but it must remain as thin as possible. In this case, the classes describe the expected graphical result (example text-center). This kind of class can be likened to factored inline style. In general, having more than 2 or 3 classes to describe an element or using names describing the rendering is a sign that the border is near if it is not already crossed. I prefer having the following HTML:

<div class="container">
    <div class="sidebar">Neque porro quisquam est qui dolorem</div>
    <div class="main-content">Nemo quaeso miretur, si post exsudatos</div>
    <div class="widgets">excipere unum pro universis</div>
</div>

Here there is only one class per element. This class describes the content and not the expected rendering. So you have more semantics than the original version, but you lose the style provided by Bootstrap. It is therefore necessary to define the style for each of the classes in a CSS file. This is where SASS comes in to help us. SASS is a CSS preprocessor (like LESS or Stylus). It is a language close to CSS providing practical features: variables, mixins, etc.

Bootstrap version 3 is developed in LESS and converted automatically to CSS and SASS. Version 4, still in beta, is developed directly in SASS. To obtain SASS sources, several solutions are possible:

• The GitHub repository: https://github.com/twbs/bootstrap-sass
• Bower: bower install bootstrap-sass
• Nuget: Install-Package Twitter.Bootstrap.Sass

Once you have downloaded Bootstrap, you can use it to define the style of our elements. For that, you need to create a sass file for our site: site.scss. This file imports bootstrap so you can enjoy everything this framework offers. Then you can use the @extend .class statement to apply the bootstrap style to our classes. This statement adds the rule that is defined as the initial rule:

@import "_bootstrap.scss";

.container {
    @extend .row;

    .left-sidebar,
    .main-content,
    .widgets {
        @extend .col-md-4;
    }

    .left-sidebar {
        @extend .col-sm-2;
    }

    .main-content {
        @extend .col-sm-6;
    }

    .widgets {
        @extend .col-sm-3;
        @extend .text-center;
    }
}

Here is the css generated for @extend .text-center:

.text-center, // Original selector (provided by Bootstrap)
.container .widgets // Added by @extend
{
    text-align: center;
}

You can see that the rule has been added to the rule initially defined by Bootstrap.

The use of SASS allows many other things. For example, it is possible to modify the constants of Boostrap (defined in the _variables.scss file) by defining them before importing Bootstrap:

$navbar-default-bg: #312312;
$light-orange: #ff8c00;
$navbar-default-color: $light-orange;

@import "_bootstrap.scss";

You can also use the mixins provided by Bootstrap (defined in the mixins folder). For example, you can define a custom grid system:

.custom-grid {
    $grid-columns: 10;

    .item {
        @include make-row();

        .profile {
            @include make-sm-column(2);
            @include make-md-column(3);
        }

        .content {
            @include make-sm-column(8);
            @include make-md-column(7);
        }
    }

    $grid-columns: 12; /* Restore default */
}

<div class="custom-grid">
    <div class="item">
        <div class="profile">Profile</div>
        <div class="content">Un peu de texte</div>
    </div>
    <div class="item">
        <div class="profile">Profile</div>
        <div class="content">Un peu de texte</div>
    </div>
</div>

#Conclusion

The use of the SASS pre-processor with Bootstrap makes it possible to preserve a semantic HTML that is not polluted by framework-specific classes. This makes it more readable and allows you to keep the separation between content and style.

Do you have a question or a suggestion about this post? Contact me!