Advertisement
  1. Web Design
  2. Sass
Webdesign

A Taste of Bourbon’s Delicious Mixins

by
Difficulty:BeginnerLength:MediumLanguages:
This post is part of a series called Bourbon: the Connoisseurs’ Choice for Sass Mixins.
Introducing Bourbon: Lightweight Sass Mixins and More
One for the Road: More Tasty Bourbon Mixins

This is part one of an in-depth look into useful mixins from the Bourbon library. I’ll introduce the most important ones and explain how you can use these time savers in practice.

List of Goodies

In this tutorial we’ll be looking at the following six mixins:

  • Background Image mixin
  • Linear Gradient mixin
  • Border Radius mixin
  • Box-sizing mixin
  • Transition mixin
  • Font Face mixin

The examples below represent not necessarily best design practices, but were chosen for exploring the basic functionality of these mixins.

Background Image Mixin

This mixin creates a background-image property comprising multiple (up to ten) comma-delimited background images, linear-gradients or radial-gradients.

With Images:

HTML:

Sass:

file

Attention! Take a look at the precedence of layers. The first image gets displayed on top. The same goes for gradients.

You can use a shorthand notation for background-image like this:

Sass:

With Gradients:

You can make use of Bourbon’s linear-gradient function inside the background-image mixin.

HTML:

Sass:

file

Linear Gradient Mixin

This little fella can take up to ten color stops, and takes percentage values if you want to fine tune the color distribution.

HTML:

Sass:

file

You can also provide an optional first argument to control the direction (in degrees) of the gradient.

Sass

file

Border Radius Mixin

This handy mixin makes it straightforward to target the corners of a box in pairs: top, bottom, right and left corners. If you want rounded corners and want to avoid typing repetitive declarations, this one is your friend.

HTML:

Sass:

file

Compare both gradients and focus your attention on the lower gradient, which now has very subtle 3px rounded corners. Too much rounding lets designs often look comical. Keep it simple!

Of course you can go crazy with border radii. If you put some time into it, you can build some cool stuff with it. Below are a couple of nonsensical examples that should just illustrate how the various options work.

Sass:

file

Sass:

file

Box Sizing Mixin

With this mixin you can easily change the box model of an element. There are three options to choose from:

  • border-box
  • content-box
  • inherit

Sass:

Transition Mixin

Worth noting straight away: attach the transition mixin to the default state of the selector (which is to be changed by an event like hover) not to the pseudo-class!

HTML:

Sass:

Element’s default state:

file

It then transitions over the specified time; here 1.0s

file

And here’s the hover state after transition:

file

You can hand-pick the properties you want to be affected by the transition. Instead of all, use only the properties you need. Different timing-functions for different properties can also be chained together nicely.

Sass:

To fine-tune transitional behaviour, there are a number of very convenient Sass variables from Bourbon for various timing-functions at your disposal:

file

Font Face Mixin

Typography is an essential piece of the puzzle when designing high quality projects for the web. On a kind of atomic level it guides so many design decisions and can influence the perception of the user in a multitude of ways.

@font-face allows designers to customize type by providing users with custom fonts which they might not have installed on their machines.

Here’s how you might typically include @font-face in your vanilla stylesheets, assuming our font files are placed in a directory “fonts/SourceSansPro”:

CSS:

This can get very tedious very quickly, and opens up the door for mistakes. Happily, those days are now gone and this practice becomes obsolete with the Bourbon font-face mixin. With Bourbon, it looks like this:

Sass:

It’s that easy! A remarkable reduction of code. There’s more to explore with the Font Face mixin too, such as the $file-formats argument (which allows you to specify the formats you’re using), and the Rails [$asset-pipeline](http://guides.rubyonrails.org/asset_pipeline.html) which is a bit more advanced, but can help you organise your assets.

Cheers!

We’ve only touched the surface of Bourbon’s extensive list of mixins. Join me in the next part where we’ll dive into some others.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.