A Taste of Bourbon’s Delicious 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:

<div class="ridiculous-background">

Sass:

.ridiculous-background
  +background-image(url("bourbon-logo@2x.png"), url("thoughtbot-logo.png"))
  background-position: center top, top left
  background-repeat: repeat-y, repeat-x
  height: 560px

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:

.ridiculous-background
  +background(url("bourbon-logo@2x.png"), url("thoughtbot-logo.png"))

With Gradients:

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

HTML:

<section class="super-duper-gradient">

Sass:

.super-duper-gradient
  +background-image(
  linear-gradient(hsla(0, 100%, 100%, 0.25) 0%, hsla(0, 100%, 100%, 0.08) 50%, transparent 50%), 
  linear-gradient(#4e7ba3, darken(#4e7ba4, 10%)))
  height: 50px

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:

<section class="simple-gradient">

Sass:

$start-gradient-color: #268BD2
$end-gradient-color: #7229d1

.simple-gradient
  +linear-gradient($start-gradient-color, $end-gradient-color)
  height: 200px

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

Sass

$start-gradient-color: #268BD2
$end-gradient-color: #7229d1

.simple-gradient
  +linear-gradient(-90deg, $start-gradient-color, $end-gradient-color)
  height: 200px

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:

<section class="super-duper-borders">

Sass:

.super-duper-borders
  +background-image(
  linear-gradient(hsla(0, 100%, 100%, 0.25) 0%, hsla(0, 100%, 100%, 0.08) 50%, transparent 50%), 
  linear-gradient(#4e7ba3, darken(#4e7ba4, 10%)))
  +border-top-radius(3px)
  +border-bottom-radius(3px)

  height: 50px

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:

.super-duper-borders
  +linear-gradient($start-gradient-color, $end-gradient-color)
  +border-top-radius(600px)
  +border-bottom-radius(100px)
  height: 200px

Sass:

.super-duper-borders
  +linear-gradient($start-gradient-color, $end-gradient-color)
  +border-right-radius(600px)
  +border-left-radius(100px)
  height: 200px

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:

.user-profile
  +box-sizing(border-box)

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:

<section class='fancy-transition'>

Sass:

.fancy-transition
  +transition (all 1.0s $ease-in-sine)

  height: 50px
  background-color: red
  +border-top-radius(5px)
  +border-bottom-radius(5px)

  &:hover
  background-color: blue
  +border-top-radius(25px)
  +border-bottom-radius(25px)

Element’s default state:

It then transitions over the specified time; here 1.0s

And here’s the hover state after transition:

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:

// all
+transition (all 1.0s $ease-in-sine);

// fine-tuned
+transition (background-color 2.0s $ease-in-sine, height 1.0s $ease-out-cubic);

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

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:

@font-face {
    font-family: 'SourceSansPro-Regular';
    src: url('fonts/SourceSansPro/sourcesanspro-regular.eot');
    src: url('fonts/SourceSansPro/sourcesanspro-regular.eot?#iefix') format('embedded-opentype'),
         url('fonts/SourceSansPro/sourcesanspro-regular.woff') format('woff'),
         url('fonts/SourceSansPro/sourcesanspro-regular.ttf') format('truetype'),
         url('fonts/SourceSansPro/sourcesanspro-regular.svg#source_sans_proregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'SourceSansPro-Bold';
    src: url('fonts/SourceSansPro/sourcesanspro-bold.eot');
    src: url('fonts/SourceSansPro/sourcesanspro-bold.eot?#iefix') format('embedded-opentype'),
         url('fonts/SourceSansPro/sourcesanspro-bold.woff') format('woff'),
         url('fonts/SourceSansPro/sourcesanspro-bold.ttf') format('truetype'),
         url('fonts/SourceSansPro/sourcesanspro-bold.svg#source_sans_probold') format('svg');
    font-weight: normal;
    font-style: normal;
}

// apply custom fonts to some classes

.regular-font {
  font-family: SourceSansPro-Regular;
}

.bold-font {
  font-family: SourceSansPro-Bold;
}

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:

+font-face(SourceSansPro-Regular, 'fonts/SourceSansPro/sourcesanspro-regular', normal)
+font-face(SourceSansPro-Bold, 'fonts/SourceSansPro/sourcesanspro-bold', bold)

.regular-font
  font-family: SourceSansPro-Regular

.bold-font
  font-family: SourceSansPro-Bold

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.