HTML & CSS
Article

5 Useful Sass Mixins in Bootstrap

By Reggie Dawson

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.

  • Lewis Cowles

    Hi Reggie, this all works fine, and I am a huge fan of sass, but it seems to me you are using SaSS on bootstrap then there is probably a problem. With SaSS you could have something much better than bootstrap, much more controlled and lightweight than bootstrap, so why would you want to use bootstrap with SaSS?

    • Rhys Burnie

      This is why we use it:

      a) It is totally controllable, you can include which parts of bootstrap you want and can have it leaner than default bootstrap. That aside;
      b) Any of our developer wether frontend or backend can smash pages together using bootstrap patterns in markup and we can style it up with ease even if we completely change how it displays theres a structure to work from.

      Our sites end up looking nothing like bootstrap but because its built with that as foundation maintenance in markup can be done by any dev and senior frontend can completely change the style of elements if required using the same classnames as hooks.

      But yeah there are many awesome frameworks to use, and for most of us we don’t need any. We choose to use bootstrap for reasons above and theres no point in rewriting simple stuff like resets, buttons standard typo etc even tho we’re totally capable – why reinvent the wheel

  • Tray Dee

    For all those who doesn’t work with Bootstrap, quick note, same mixins (but a little bit different naming) are available in Zurb Foundation.Mixins which Reggie mentioned are very basic helpers presented as a showcase for beginners. Anyway, it shows a good practice of using preprocessor(s) & mixins while dealing with repeatable components/structures (grid, buttons, etc). I remember in 2007, when I prayed for “functions” in CSS. It’s still huge luxury that we can use it now. I wonder if there are some developers against of using preporcessors.

  • Test

    How can I find more mixins that I can use?

    • http://returnx.ru/ transGLUKator

      Just look in the mixins folder of bootstrap (you should download SASS or LESS version of Bootstrap). They are all pretty self-explanatory.

  • Stanimira Atanasova

    Hey everybody. Can you help me figure out how to use Bootstrap’s bg-variant mixin:
    @mixin bg-variant($parent, $color)

    Any ideas what should go into this $parent variable?

    Mixin link – https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/mixins/_background-variant.scss

    Thanks!

  • http://surferuk.co.uk/ Stephen Deere

    what about the .panel-footer that doesn’t seem to get over ridden when i use the

    panel-variant() mixin

    can solve it but want to keep code minimal

  • http://surferuk.co.uk/ Stephen Deere

    what about the .panel-footer that doesn’t seem to get over ridden when i use the

    panel-variant() mixin

    can solve it but want to keep code minimal

  • Fabriccio

    @include make-lg-column(2); and bootstrap 4?

Recommended
Sponsors
Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

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