Blogs

5 Useful Sass Mixins in Bootstrap

Reggie Dawson
Share

As many of you are likely aware, Bootstrap is a powerful toolkit for front-end developers. It allows us to produce clean, responsive sites that work across multiple devices.

If you are using Bootstrap for serious development there’s a good chance you are using its Less or Sass implementations.

In keeping with that, below I’ll describe 5 Bootstrap mixins that I think you should try. They are built right into the framework in both Sass and Less, and may save you some time coding your next site. In this post, I’ll be specifically discussing the Sass versions of the mixins.

@mixin make-row()

The make-row() mixin does exactly what it says, generating a row in a grid. Why use this mixin versus just adding the .row class? Two reasons. The first is that we can use semantic code, so instead of:

<div class="row">

we can use something like:

<section>

This way, we can use an appropriate tag (section, article, etc.) to specify a portion of the page. This can potentially make the code easier to read and understand what content goes in that row. All we have to do now is

section {
    @include make-row();
}

Very useful as you can see, but the real utility of this mixin is unlocked when you combine its usage with the next mixin.

@mixin make-*-column()

This mixin works in conjunction with @mixin make-row() and is really a group of mixins. One of the mixins allows you to define the size of column you want to use while the others allow you to push, pull, and offset columns.

If you are familiar with Bootstrap (or any grid system), the grid system is based on rows that contain columns. Since there will probably never be a situation where you use one of the column mixins without the make-row() mixin and vice versa, you can have something like this to create the columns/rows:

section {
    @include make-row();
    article {
        @include make-lg-column(2);
    }
}

The parent section creates the row that contains our nested columns. In this case each article will consist of 2 columns. As a result, you can create up to 6 article sections to span the page’s 12 columns. 

<section>
    <article>column 1</article>
    <article>column 2</article>
<section>

If you have a site where each page has the same layout, you can create the entire layout in Sass. Even if each page is different, you can benefit by using these mixins to layout static parts of the site such as headers and footers.

@mixin size()

The size() mixin is a simple but extremely useful mixin. When creating rows and columns in Bootstrap, the default behavior is to size the columns based on their content. This is fine in a lot of situations, but sometimes you need a specific size. Thats where the size mixin comes in. It takes two arguments – width and height:

.example {
    @include size (16%, 300px)
}

In this case I chose a percentage for the width (keeping it responsive). Of course you could always just set the width and height manually in plain CSS, but this does the same thing in a single line of code. This mixin also has a companion @mixin square(), which takes a single argument.

@mixin panel-variant()

One of the knocks most people have with Bootstrap is that most sites created with it look the same. This is because many people take the stock components and use them as is. Although this is perfectly fine, many of us who use Bootstrap customize every component we use.

The panel-variant() mixin helps in that regard by letting you easily style panels. The mixin takes four arguments $border, $heading-text-color, $heading-bg-color, and $heading-border.

.panelrow {
    @include panel-variant(#d01919, #1cf21c, #000000, #bad017);
}

In this example, I’ve created a class that includes the mixin and that will be used alongside Bootstrap’s panel classes:

<div class="panel panel-default panelrow">
    <div class="panel-heading">
        <h3 class="panel-title">Panel title</h3>
    </div>
    <div class="panel-body">
        Panel content
    </div>
</div>

@mixin button-variant()

Another mixin designed to let you easily customize Bootstrap components, the button-variant() mixin lets you style buttons. This mixin takes three arguments – $color, $background, and $border:

.custom-btn {
        @include button-variant(#cece19, #000000, #2dbe27);
    }

@mixin gradient-*()

This is actually a group of mixins that allow you to quickly create CSS gradients.

Examples include gradient-horizontal(), gradient-vertical(), and gradient-horizontal-three-colors(). Each mixin takes different arguments, so be sure to look at the source to determine which arguments you need.

The following mixin takes four arguments – $start-color, $end-color, $start-percent, $end-percent:

.example {
        @include gradient-horizontal(#1834cc, #1dc937, 0%, 100%);
    }

Conclusion

As you can see there are some powerful mixins built into Bootstrap. These 5 are only scratching the surface. Try digging into the mixins folder in Bootstrap’s repository and look around. Find out what arguments are needed and how you can use them, then try them out in your own projects. You will probably find yourself using some of these as your go-to mixins, just like I do.