5 Useful Sass Mixins in Bootstrap

Reggie Dawson
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.

Frequently Asked Questions (FAQs) about Sass Mixins in Bootstrap

What are the benefits of using Sass Mixins in Bootstrap?

Sass Mixins in Bootstrap offer a range of benefits. They allow you to write reusable styles, which can significantly reduce the amount of CSS you need to write and maintain. This can make your stylesheets more manageable and easier to understand. Mixins also support arguments, which means you can customize the output of your mixins for different use cases. This makes them incredibly flexible and powerful. Furthermore, using Sass Mixins can help to ensure consistency across your project, as you can define styles in one place and then reuse them wherever they are needed.

How do I create a Sass Mixin in Bootstrap?

Creating a Sass Mixin in Bootstrap is straightforward. First, you need to define your mixin using the @mixin directive, followed by the name of your mixin. You can then write the CSS rules you want your mixin to include. Here’s an example:

@mixin transform($property) {
-webkit-transform: $property;
-ms-transform: $property;
transform: $property;
}

You can then include your mixin in your styles using the @include directive, like so:

.box { @include transform(rotate(30deg)); }

Can I pass arguments to a Sass Mixin in Bootstrap?

Yes, you can pass arguments to a Sass Mixin in Bootstrap. This allows you to customize the output of your mixin for different use cases. To pass arguments to a mixin, you include them in parentheses after the mixin’s name when you define it. You can then use these arguments within the mixin’s rules. Here’s an example:

@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}

You can then pass an argument to this mixin when you include it in your styles, like so:

.box { @include border-radius(10px); }

How can I use Sass Mixins to customize Bootstrap’s default styles?

Sass Mixins can be used to customize Bootstrap’s default styles in a number of ways. For example, you can use mixins to change the default colors, fonts, and spacing used by Bootstrap. You can also use mixins to add new styles or modify existing ones. To do this, you would first define your mixins, and then include them in your styles after importing Bootstrap’s Sass files. This will override Bootstrap’s default styles with your custom ones.

Are there any limitations or drawbacks to using Sass Mixins in Bootstrap?

While Sass Mixins in Bootstrap offer many benefits, there are a few potential drawbacks to be aware of. One potential limitation is that mixins can lead to bloated CSS output if not used carefully. This is because each time you include a mixin, it generates a new set of CSS rules. Therefore, it’s important to use mixins judiciously and to consider other Sass features, such as placeholders and extends, where they might be more appropriate. Additionally, while mixins can help to abstract away complex or repetitive code, they can also make your styles harder to understand if overused or used inappropriately.

Can I use Sass Mixins with Bootstrap’s grid system?

Yes, you can use Sass Mixins with Bootstrap’s grid system. Bootstrap provides a number of mixins for working with the grid system, such as make-row(), make-col(), and make-col-offset(). These mixins allow you to create custom grid layouts and to adjust the layout of your content for different screen sizes.

How can I use Sass Mixins to create responsive designs in Bootstrap?

Sass Mixins can be used to create responsive designs in Bootstrap by allowing you to write styles that apply at different screen sizes. Bootstrap provides a mixin called media-breakpoint-up() that you can use to apply styles at different breakpoints. For example, you could use this mixin to change the font size of a heading at the ‘md’ breakpoint, like so:

h1 {
font-size: 2em;

@include media-breakpoint-up(md) {
font-size: 3em;
}
}

Can I create my own custom Sass Mixins in Bootstrap?

Yes, you can create your own custom Sass Mixins in Bootstrap. This can be a powerful way to encapsulate and reuse your own styles across your project. To create a custom mixin, you use the @mixin directive, followed by the name of your mixin and any arguments it should accept. You can then write the CSS rules you want your mixin to include.

How can I use Sass Mixins to customize Bootstrap’s buttons?

You can use Sass Mixins to customize Bootstrap’s buttons in a number of ways. For example, you could create a mixin to apply a gradient background to a button, and then include this mixin in your button styles. Alternatively, you could use one of Bootstrap’s built-in button mixins, such as button-variant() or button-size(), to customize the appearance and size of your buttons.

Can I use Sass Mixins in Bootstrap with other CSS pre-processors?

Sass Mixins are a feature of the Sass CSS pre-processor, so they can’t be used directly with other CSS pre-processors like Less or Stylus. However, most CSS pre-processors have similar features, so you can often achieve the same results using a different syntax. If you’re using Bootstrap, you’ll need to use the Sass version of Bootstrap to take advantage of Sass Mixins.