Bootstrap + SASS = ♥

Bootstrap is one of the most popular CSS frameworks today. It lets you quickly build attractive, responsive websites. Just include a CDN link, follow the documentation, and you can have a page with a header and multi-column layout up and running in minutes.

You quickly end up with HTML that looks 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, it contains Bootstrap-specific classes that explicitly describe the rendering. I am not a fan of this approach. A web page is typically divided into 3 parts:

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

Of course, there is always some overlap between these 3 parts, but it should be kept to a minimum. Here, the classes describe the expected visual result (for example, text-center). These are essentially factored-out inline styles. In general, having more than 2 or 3 classes per element, or using names that describe rendering rather than content, signals that this boundary has been crossed or is close to it. I prefer 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. Each class describes the content, not the expected rendering. This gives the markup more semantics than the original version, but you lose the styles provided by Bootstrap. You therefore need to define the style for each class in a CSS file. This is where SASS comes in. SASS is a CSS preprocessor (like LESS or Stylus) that extends CSS with useful features such as variables, mixins, and more.

Bootstrap version 3 was developed in LESS and automatically converted to CSS and SASS. Version 4, still in beta at the time of writing, is developed directly in SASS. To get the SASS sources, you have several options:

• 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 style your elements. Start by creating a SASS file for your site: site.scss. This file imports Bootstrap, giving you access to everything the framework provides. You can then use the @extend .class statement to apply a Bootstrap style to your own classes. The statement merges the new class into the original selector:

@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 new selector was added alongside the one originally defined by Bootstrap.

SASS also enables much more. For example, you can override Bootstrap's variables (defined in the _variables.scss file) by declaring 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

Using SASS with Bootstrap lets you keep your HTML semantic and free from framework-specific classes, making it more readable and maintaining a clean separation between content and style.

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