15 essential Sass mixins

There are  a whole host of Sass mixin libraries out there: Bourbon is a personal favourite, Compass is hugely popular. But sometimes, actually always, it’s better to pick and mix your mixins to suit yourself.

It’s never good to rely too heavily on a tool, and if you think Sass mixins begin and end with the @include statement then you should probably try writing out a few of your own.

Sass mixins are available for a huge range of tasks, here’s 15 that no developer should be without:

box-sizing

Sass, like all preprocessors is great for taking out the vendor prefixes from your code. This mixin sets box-sizing and handle the prefixes once:

@mixin box-sizing($type)
 {
 -webkit-box-sizing:$type;
 -moz-box-sizing:$type;
 box-sizing:$type;
 }

Usage:

div {
 @include box-sizing(border-box);
 }

opacity

Frequently, you want to set not only vendor prefixes but use different syntax altogether. This mixin sets opacity for current browsers and older IE:

@mixin opacity($opacity) {
     opacity: $opacity;
    filter: alpha(opacity=($opacity * 100));
 }

Usage:

div {
 @include opacity(0.5);
 }

column-width

column-width is one of the best examples of a mixin taking care of browser prefixes:

@mixin column-width ( $value: 150px ) {
     -webkit-column-width: $value;
    -moz-column-width: $value;
    column-width: $value;
 }

Usage:

div {
 @include column-width(150px);
 }

circle

Once you’ve set up a mixin like border-radius, you can use it in other mixins, in this case to make a rectangular div circular:

@mixin circle
 {
 @include border-radius(100%);
 }

Usage:

div {
 @include circle();
 }

font-size

Mixins are great for progressive enhancement. This mixin sets the font-size in pixels, then overwrites that by setting it in rems. rems will only be used if the browser in question supports them:

@mixin font-size($size) {
     font-size:$size;
 font-size: ($size / 16px) * 1rem;
 }

Usage:

div {
 @include font-size(14px);
 }

box-shadow

This great mixin lets you specify the values of a box-shadow once, without worrying about vendor prefixes:

@mixin box-shadow( $h: 10px , $v: 10px , $b: 0px , $s: 0px , $c: #000000 ) {
     -webkit-box-shadow: $h $v $b $s $c;
 -moz-box-shadow: $h $v $b $s $c;
 box-shadow: $h $v $b $s $c;
 }

Usage:

div {
 @include box-shadow(8px, 8px);
 }

xPos

You can also use mixins to simplify syntax. This mixin provides a shorthand for positioning an element along the x axis:

@mixin xPos($x) {
 -webkit-transform:translateX($x);
 -moz-transform:translateX($x);
 -ms-transform:translateX($x);
 transform:translateX($x);
 }

Usage:

div {
 @include xPos(50px);
 }

vertical-align

Vertically aligning elements is challenging even with CSS, but this mixin gives you a nice simple solution:

@mixin vertical-align {
     position: relative;
 top: 50%;
 -webkit-transform: translateY(-50%);
 -ms-transform: translateY(-50%);
 transform: translateY(-50%);
 }

Usage:

div {
 @include vertical-align();
 }

flexbox

Sass mixins are great for handling settings like flexbox, that have had several different syntaxes published at different times.

@mixin flexbox
 {
 display:-webkit-box; // old
 display:-moz-box; // old
 display:-ms-flexbox; // ie
 display:-webkit-flex; // new
 display:flex; // new
 }

Usage:

div {
 @include flexbox();
 }

flex

Having set up a mixin to set the display property to flex, you’ll also need a mixin to set your flex value:

@mixin flex($values) {
     -webkit-box-flex: $values;
 -moz-box-flex:  $values;
 -ms-flex:  $values;
 -webkit-flex:  $values;
 flex:  $values;
 }

Usage:

div {
 @include flex(1, 2);
 }

flex-order

And another to set the order property:

@mixin flex-order($order){
     -webkit-box-ordinal-group: $order; // old
 -moz-box-ordinal-group: $order; // old
 -ms-flex-order: $order; // ie
 -webkit-order: $order; // new
 order: $order; // new
 }

Usage:

div {
 @include flex-order(3);
 }

flex-direction

Mixins also allow us to use Sass’ @if, @else if, and @else statements to combine what could have been two separate mixins into one:

@mixin flex-direction($direction)
 {
 @if $direction == column
 {
 -webkit-flex-direction:vertical;
 -moz-flex-direction:vertical;
 -ms-flex-direction:column;
 -webkit-flex-direction:column;
 flex-direction:column;
 }
 @else
 {
 -webkit-flex-direction:horizontal;
 -moz-flex-direction:horizontal;
 -ms-flex-direction:row;
 -webkit-flex-direction:row;
 flex-direction:row;
 }
 }

Usage:

div {
 @include flex-direction(column);
 }

gradient

We should always try to keep our code simple, but when necessary mixins can be huge. This mixin allows us to create different kinds of gradient for all browsers, using just three values:

@mixin gradient($start-color, $end-color, $orientation)
 {
 background: $start-color;
 @if $orientation == vertical
 {
 // vertical
 background: -moz-linear-gradient(top,  $start-color 0%, $end-color 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$start-color), color-stop(100%,$end-color));
 background: -webkit-linear-gradient(top,  $start-color 0%,$end-color 100%);
 background: -o-linear-gradient(top,  $start-color 0%,$end-color 100%);
 background: -ms-linear-gradient(top,  $start-color 0%,$end-color 100%);
 background: linear-gradient(to bottom,  $start-color 0%,$end-color 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start-color', endColorstr='$end-color',GradientType=0 );
 }
 @else if $orientation == horizontal
 {
 // horizontal
 background: -moz-linear-gradient(left,  $start-color 0%, $end-color 100%);
 background: -webkit-gradient(linear, left top, right top, color-stop(0%,$start-color), color-stop(100%,$end-color));
 background: -webkit-linear-gradient(left,  $start-color 0%,$end-color 100%);
 background: -o-linear-gradient(left,  $start-color 0%,$end-color 100%);
 background: -ms-linear-gradient(left,  $start-color 0%,$end-color 100%);
 background: linear-gradient(to right,  $start-color 0%,$end-color 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start-color', endColorstr='$end-color',GradientType=1 );
 }
 @else
 {
 // radial
 background: -moz-radial-gradient(center, ellipse cover,  $start-color 0%, $end-color 100%);
 background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,$start-color), color-stop(100%,$end-color));
 background: -webkit-radial-gradient(center, ellipse cover,  $start-color 0%,$end-color 100%);
 background: -o-radial-gradient(center, ellipse cover,  $start-color 0%,$end-color 100%);
 background: -ms-radial-gradient(center, ellipse cover,  $start-color 0%,$end-color 100%);
 background: radial-gradient(ellipse at center,  $start-color 0%,$end-color 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start-color', endColorstr='$end-color',GradientType=1 );
 }
 }

Usage:

div {
 @include gradient(#ff00ff, #ff00cc, vertical);
 }

ghost-button

If you want to stay on-trend, you can use this mixin to create the ghost button we built a couple of weeks ago. The &:hover allows us to specify the hover state:

@mixin ghost-button($font, $font-size, $font-color, $border-size, $border-color, $padding, $transition-speed, $hover-color)
 {
 display:inline-block;
 text-decoration:none;
 text-transform:uppercase;
 font-family: $font;
 font-size: $font-size;
 color:$font-color;
 border:$border-size solid $border-color;
 padding:$padding;
 -webkit-transition: color $transition-speed, background $transition-speed;
 transition: color $transition-speed, background $transition-speed;
 &:hover
 {
 background:$border-color;
 color:$hover-color;
 }
 }

Usage:

div {
 @include ghost-button(“Trebuchet”, 12px, #ffffff, 5px, #34dec6, 4px, 300ms, #000000 );
 }

break-point

By using the @content statement, we can even pull in content, and set up all our break points by keyword. You shouldn’t set break points based on devices, but for the sake of clarity here’s one for desktop and mobile:

@mixin break-point($point)
 {
 @if $point == desktop{
 @media only screen and (max-width:50em)
 {
 @content;
 }
 }
 @else if $point == mobile{
 @media only screen and (max-width:20em)
 {
 @content;
 }
 }
 }

Usage:

div {
 margin:5em;
 @include break-point(mobile)
 {
 margin:2em;
 }
 }

Paddi MacDonnell is a designer and entrepreneur from Northern Ireland, follow her on Twitter. More articles by Paddi MacDonnell
Home CSS Deals DesignBombs HTML HTML5 JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress