We use Bourbon by Thoughtbot as a mixin library. Check it out for a list of the available mixins

We also use a few custom mixins for particular purposes.

Center Block Content

You can also use the u-centerBlock utility class if you prefer to offload the work on the html. That is our preferred method but sometimes it is necessary to work in the scss.

@mixin center-block()

Clearfix

@mixin clearfix()

New Clearfix

@mixin pie-clearfix()

Media Queries

Media query for easy breakpoint. Use pixel width with or without units and it will convert to em

@mixin mq($point, $query1: min, $query2: width, $ie9: false)

REM Calculation

Can handle shorthand calculations

@mixin rem-calc($property, $values)

Spacings

Space elements by an amount based on your magic number. Pass in the property to be indented as a paramater

@mixin spacing($property)

Double Spacings

Space elements by an amount based on your magic number. Pass in the property to be indented as a paramater

@mixin double-spacing($property)

Half Spacings

Space elements by an amount based on your magic number. Pass in the property to be indented as a paramater

@mixin half-spacing($property)

Quarter Spacings

Space elements by an amount based on your magic number. Pass in the property to be indented as a paramater

@mixin quarter-spacing($property)

Eighth Spacings

Space elements by an amount based on your magic number. Pass in the property to be indented as a paramater

@mixin eighth-spacing($property)

Font Size

Quickly generate a font-size in rems, with a pixel fallback, based on the value we pass into the mixin and an optional line-height.

@mixin font-size($font-size, $line-height: true)