common scss mixin helper that is useful

animate-mixin.scss

// Define animation name, and properties
/* 
@include keyframes(fade-out) {
  0% { opacity: 1; }
  90% { opacity: 0; }
} 
*/
@mixin keyframes($animation-name) {
    @-webkit-keyframes #{$animation-name} {
        @content;
    }
    @-moz-keyframes #{$animation-name} {
        @content;
    }  
    @-ms-keyframes #{$animation-name} {
        @content;
    }
    @-o-keyframes #{$animation-name} {
        @content;
    }  
    @keyframes #{$animation-name} {
        @content;
    }
}

// Add animation to element
/* 
.element {
  width: 100px;
  height: 100px;
  background: black;
  @include animation('fade-out 5s 3');
}
*/

@mixin animation($animate-string) {
  -webkit-animation: #{$animate-string};
  -moz-animation: #{$animate-string};
  -ms-animation: #{$animate-string};
  -o-animation: #{$animate-string};
  animation: #{$animate-string};
}

center-mixin.scss

/* 
.foo {
  @include center(.foo-child);
}

.foo {
  @include center(.foo-child, both);
}
*/

@mixin center($child, $position: vertical) {
  position: relative;
  #{$child} {
    position: absolute;
    @if $position == 'vertical' {
      top: 50%;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
    }
    @else if $position == 'horizontal' {
      left: 50%;
      -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      transform: translate(-50%);
    }
    @else if $position == 'both' {
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
    }
  }
}

clearfix-mixin.scss

/* 
.container-with-floated-children {
  @extend %clearfix;
} 
*/

%clearfix {
  *zoom: 1;
  &:before, &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

font-face-mixin.scss

@mixin font-face($font-name, $file-name, $weight: normal, $style: normal) { 
  @font-face {
    font-family: quote($font-name);
    src: url($file-name + '.eot');
    src: url($file-name + '.eot?#iefix')  format('embedded-opentype'),
         url($file-name + '.woff') format('woff'),
         url($file-name + '.ttf')  format('truetype'),
         url($file-name + '.svg##{$font-name}')  format('svg');
    font-weight: $weight;
    font-style: $style;
  }
}

font-size-mixin.scss

/* 
p {
  @include font-size(14px)
} 
*/

@function calculateRem($size) {
  $remSize: $size / 16px;
  @return $remSize * 1rem;
}

@mixin font-size($size) {
  font-size: $size;
  font-size: calculateRem($size);
}

gradient-mixin.scss

/*
.foo {
  @include background-gradient(red, black, 'vertical');
}
*/

@mixin background-gradient($start-color, $end-color, $orientation) { 
    background: $start-color;

    @if $orientation == 'vertical' {
      background: -webkit-linear-gradient(top, $start-color, $end-color);
      background: linear-gradient(to bottom, $start-color, $end-color);
    } @else if $orientation == 'horizontal' {
      background: -webkit-linear-gradient(left, $start-color, $end-color);
      background: linear-gradient(to right, $start-color, $end-color);
    } @else {
      background: -webkit-radial-gradient(center, ellipse cover, $start-color, $end-color);
      background: radial-gradient(ellipse at center, $start-color, $end-color);
    }
}

media-query-mixin.scss

/* .foo {
  @include screen(large) {
    width: 20%;
  }
  @include screen(desktop) {
    width: 40%;
  }
  @include screen(tablet) {
    width: 60%;
  }
  @include screen(phone) {
    width: 80%;
  }
  @include screen(custom, max, 400) {
    width: 100%;
  }
} */

$breakpoint-phone: 768px;
$breakpoint-tablet: 992px;
$breakpoint-desktop: 1200px;

@mixin screen($size, $type: max, $pixels: $breakpoint-phone) {
  @if $size == 'phone' {
    @media screen and ($type + -width: $breakpoint-phone) {
        @content;
    }
  }
  @else if $size == 'tablet' {
    @media screen and ($type + -width: $breakpoint-tablet) {
        @content;
    }
  }
  @else if $size == 'desktop' {
    @media screen and ($type + -width: $breakpoint-desktop) {
        @content;
    }
  }
 @else if $size == 'large' {
    @media screen and ($type + -width: $breakpoint-desktop) {
        @content;
    }
  }
  @else if $size == 'custom' {
    @media screen and ($type + -width: $pixels + px) {
     @content;
    }
  }
  @else {
    @content;
  }
}

shape-mixin.scss

/* 
.btn-rectangle {
  @extend %no-radius;
}
*/
%no-radius {
  border-radius: 0;
}

/* 
.btn-circle {
  @extend %circle;
}
*/
%circle {
  border-radius: 50%;
}

/* 
.btn-round {
  @include round();
} 

.btn-round {
  @include round(4px);
}
*/
@mixin round($radius: 4%) {
  border-radius: $radius;
}

theme-mixin.scss

// @include theme(theme-banana, yellow);
// Will generate
/* 
.theme-banana .element {
  color: yellow;
}
.theme-banana .other-element {
  background: #bbff33;
}
*/

@mixin theme($name, $color) {
  // Define colors in your theme
  $primary: $color;
  $secondary: lighten(adjust-hue($color, 20), 10%);
  // Add your classes with css colors added
  .#{$name} {
    .element {
      color: $primary;
    }
    .other-element {
      background: $secondary;
    }
  }
}