My favorite SASS mixins

animate.scss

/* Mixin */
@mixin animate($time, $transition) {
	transition: $time $transition;
	-moz-transition: $time $transition;
	-webkit-transition: $time $transition;
	-o-transition: $time $transition;
}

/* Sample */
.element{
  @include animate(.3s, ease);
}

boxsizing.scss

/* Mixin */
@mixin boxSizing() {
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box; 
	box-sizing: border-box;
}

/* Sample */
.element {
  @include boxSizing();
}

breakpoints.scss

/* 
  Mixin 
  These values are based off of http://www.dimensionsapp.com/ 
*/
@mixin breakpoint($point) {
  @if $point == normal {
    @media (max-width: 1024px) { @content; }
  }
  @else if $point == tablet {
    @media (max-width: 768px) { @content; }
  }
  @else if $point == widephone {
    @media (max-width: 480px)  { @content; }
  }
  @else if $point == phone {
    @media (max-width: 320px)  { @content; }
  }
}

/* Sample */
.element {
  background: #ff0000;
  @include breakpoint('widephone'){
    background: #ccc;
  }
}

image2x.scss

/* Mixin */
@mixin image-2x($image, $width, $height) {
  @media (min--moz-device-pixel-ratio: 1.3),
         (-o-min-device-pixel-ratio: 2.6/2),
         (-webkit-min-device-pixel-ratio: 1.3),
         (min-device-pixel-ratio: 1.3),
         (min-resolution: 1.3dppx) {
    background-image: url($image);
    background-size: $width $height;
  }
}

/* Sample */
.element {
  @include image-2x("/images/site/logo@2x.png", 245px, 90px);
}

verticalCenter.scss

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