Cacher is the code snippet organizer for pro developers

// Mixins

/* Table of Contents
==================================================
  1 Fixed Footer
  2 Breakpoints
  3 IE Inline-Block
  4 Effects
    A Transitions
    B Border Radius
    C Opacity
    D Better Clearfix
    E Center Div
    F Equal Padding
    G Infinite Down
    H Rotation
    I IE Inline-Block
    J Background-Size Cover
  5 Retina Images
  

/* 1 Fixed Footer
================================================== */

@mixin sticky-footer($footer-height, $wrapper-selector: unquote("#wrapper"), $container-selector: unquote("#container"), $footer-selector: unquote("#footer")) {
    html,
    body {
        height: 100%;
    }
    body {
        margin: 0px;
        padding: 0px;
    }
    #{$wrapper-selector} {
        min-height: 100%;
        height: auto !important;
        height: 100%;
        margin-bottom: -$footer-height;
        #{$container-selector} {
            padding-bottom: $footer-height;
        }
    }
    #{$footer-selector} {
        height: $footer-height;
    }
}


/* 2 Breakpoints (Sass + Bootstrap)
================================================== */

@mixin breakpoint($point) {
    @if $point==bp-huge {
        @media (min-width: $bp-huge) {
            @content;
        } // max width
    }
    @else if $point==bp-wide {
        @media (max-width: $bp-wide) {
            @content;
        } // landscape
    }
    @else if $point==bp-medium {
        @media (max-width: $bp-medium) {
            @content;
        } // portrait
    }
    @else if $point==bp-small {
        @media (max-width: $bp-small) {
            @content;
        } // mobile
    }
    @else if $point==bp-xsmall {
        @media (max-width: $bp-xsmall) {
            @content;
        } // mobile
    }
    @else if $point==bp-horiz {
        @media (max-height: $bp-horiz) {
            @content;
        } // mobile
    }
}


/* 3 Antialiasing mode font rendering
================================================== */

@mixin font-smoothing {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* 4 Effects & Layout
================================================== */

// A Transitions
@mixin transition($transition-property, $transition-time, $method) {
    -webkit-transition: $transition-property $transition-time $method;
    -moz-transition: $transition-property $transition-time $method;
    -o-transition: $transition-property $transition-time $method;
    transition: $transition-property $transition-time $method;
    @media screen and (min-width: 0\0) and (min-resolution: +72dpi) {
        -ms-transition: $transition-property $transition-time $method;
    }
}

// B Border Radius
@mixin border-radius($radiuspx) {
    -webkit-border-radius: $radiuspx;
    -moz-border-radius: $radiuspx;
    border-radius: $radiuspx;
    background-clip: padding-box;
    /* stops bg color from leaking outside the border: */
}

// C Opacity	
@mixin opacity($opacity, $important:"") {
    opacity: $opacity unquote($important);
    $opacity-ie: $opacity * 100;
    filter: alpha(opacity=$opacity-ie); //IE8
}

// D Better Clearfix
@mixin cf() {
    &:before,
    &:after {
        content: "";
        display: table;
    }
    &:after {
        clear: both;
    }
    & {
        *zoom: 1; // For IE 6/7 only Include this rule to trigger hasLayout and contain floats.
    }
}

// E Center Div
@mixin center($axis: "both") {
    @if $axis=="y" {
        position: absolute;
        top:50%;
        -webkit-transform: translate(0, -50%);
        -moz-transform: translate(0, -50%);
        -o-transform: translate(0, -50%);
        transform: translate(0, -50%);
        @media screen and (min-width: 0\0) and (min-resolution: +72dpi) {
            -ms-transform: translate(0, -50%);
            bottom: 0;
            left: 0;
            right: 0;
            top: 50%;
        }
    }
    @if $axis=="x" {
        position: absolute;
        left:50%;
        -webkit-transform: translate(-50%, 0);
        -moz-transform: translate(-50%, 0);
        -o-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
        @media screen and (min-width: 0\0) and (min-resolution: +72dpi) {
            -ms-transform: translate(-50%, 0);
            left: 50%;
            bottom: 0;
            top: 0;
            right: 0;
        }
    }
    @if $axis=="both" {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        @media screen and (min-width: 0\0) and (min-resolution: +72dpi) {
            -ms-transform: translate(-50%, -50%);
            top: 50%;
            left: 50%;
            bottom: 0;
            right: 0;
        }
    }
    @if $axis=="none" {
        position: relative;
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
        @media screen and (min-width: 0\0) and (min-resolution: +72dpi) {
            -ms-transform: translate(0, 0);
            bottom: auto;
            right: auto;
            top: auto;
            left: auto;
        }
    }
}

// F Equal Padding
@mixin padding($pad) {
    padding-top: $pad;
    padding-bottom: $pad;
    @include breakpoint(bp-medium) {
        padding-top: $pad/2;
        padding-bottom: $pad/2;
    }
}

// G Infinite Down
@mixin infinite($pad, $pad2, $mar1) {
    padding-top: $pad;
    padding-bottom: $pad2;
    margin-bottom: $mar1;
    @include breakpoint(bp-medium) {
        padding-top: $pad/2;
        padding-bottom: $pad/2;
        margin-bottom: 0;
    }
}

// H Rotation
@mixin rotate($rot) {
    -webkit-transform: rotate($rot);
    -moz-transform: rotate($rot);
    -o-transform: rotate($rot);
    transform: rotate($rot);
    -sand-transform: rotate($rot);
    -ms-transform: rotate($rot);
}

// I IE Inline-Block
@mixin inline-block() {
    display: inline-block;
    *display: inline;
    zoom: 1;
}

// J Background size cover 
@mixin cover() {
    -webkit-background-size: cover !important;
    -moz-background-size: cover !important;
    -o-background-size: cover !important;
    background-size: cover !important;
}


/* 5 Retina Images
================================================== */

// background: url(assets/img/gf-nav.jpg) left center no-repeat;
// @include image-2x("assets/img/gf-nav@2x.jpg", 47px, 31px);
@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) {
        /* on retina, use image that's scaled by 2 */
        background-image: url($image);
        -webkit-background-size: $width $height;
        -moz-background-size: $width $height;
        background-size: $width $height;
    }
}


/* 6 Input + Buttons
================================================== */

// Solid and Hollow buttons mixin by the @poopsplat
@mixin btn($background, $color) {
    border: 2px solid rgba(255, 255, 255, 0); // You'll want to customize this
    color: $color;
    background: $background;
    padding: 5px 5% 4px 5%;
    &:hover,
    &:focus,
    &:active {
        color: $background;
        background: $color;
        border-color: $background;
    }
    &.hollow {
        background: none;
        color: $background;
        border: 2px solid $background; // The thickness should correspond with the thickness set above
        padding: 5px 5% 4px 5%;
        &:hover,
        &:focus,
        &:active {
            color: $color;
            background: $background;
        }
    }
}

@mixin input($background, $color) {
    border: 2px solid rgba(255, 255, 255, 0); // You'll want to customize this
    color: $color;
    background: $background;
    padding: 5px 2% 4px 2%;
    &:hover,
    &:focus,
    &:active {
        color: $background;
        background: $color;
        border-color: $background;
    }
    &.hollow {
        background: none;
        color: $background;
        border: 2px solid $background; // The thickness should correspond with the thickness set above
        padding: 5px 2% 4px 2%;
        &:hover,
        &:focus,
        &:active {
            color: $color;
            background: $background;
        }
    }
}