Sass: A collection of Sass mixins I used on most projects.

mixins.scss

/**
 * Media Queries
 * 
 */

@mixin breakpoint($point) {
  @if $point == full-width {
    @media only screen and (max-width: 960px) { @content; }
  }
  @else if $point == tablet-portrait {
    @media only screen and (max-width: 820px) { @content; }
  }
  @else if $point == phone-big {
    @media only screen and (max-width: 767px)  { @content; }
  }
  @else if $point == phone-mid {
    @media only screen and (max-width: 640px)  { @content; }
  }
  @else if $point == phone {
    @media only screen and (max-width: 480px)  { @content; }
  }
  @else if $point == phone-small {
    @media only screen and (max-width: 320px)  { @content; }
  }
  @else {
    @media only screen and ($point) { @content; }
  }
}

/**
 * Font size to REMS 
 * Returns: Font-size and lineheight values in REMS with a PX fallback
 * Input: Font-size and lineheight / 10. 16px would be 1.6. E.g.:
 * @include font-size(1.6, 2.4);
 * 
 * http://css-tricks.com/snippets/css/less-mixin-for-rem-font-sizing/ * 
 */

@mixin type-size($sizeValue: 1.6, $lineHeight: $sizeValue) {
  font-size: ($sizeValue * 10) + px;
  font-size: ($sizeValue / 1.6) + rem;
  line-height: ($lineHeight * 10) + px;
  line-height: ($lineHeight / 1.6) + rem;
}

/**
 * PX to REMS Mixing 
 * Returns  size and lineheight in REMS with a px fallback
 * Input: CSS Property and value / 10. E.g.:
 * @include px-to-rem(margin-top, 2.4);
 * 
 * http://css-tricks.com/snippets/css/less-mixin-for-rem-font-sizing/ * 
 */

@mixin px-to-rem($property, $val) {
  #{$property}: ($val * 10) + px;
  #{$property}: ($val / 1.6) + rem;
}

/**
 * CSS Keyframe Animations
 * 
 */

@mixin animation($animationName) {
  -webkit-animation: $animationName;
  -moz-animation: $animationName;
  -o-animation: $animationName;
  animation: $animationName;
}

@mixin keyframes($animationName) {
    @-webkit-keyframes $animationName {
        @content;
    }
    @-moz-keyframes $animationName {
        @content;
    }
    @-o-keyframes $animationName {
        @content;
    }
    @keyframes $animationName {
        @content;
    }
}

@include keyframes(fade-in) {
  0%   {    
    opacity: 0;
  }
  100% {
    opacity: 1;
  } 
}

/**
 * Extends
 * 
 */

%basic-animation {
  @include transition(all 0.2s ease-in-out);
}

.clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

%border-box {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}