Current collection of mixins I use on all projects.

_custom-mixins.scss

// Top left block to see what breakpoint you are on.
.mq-block {
	position: fixed;
	top: 0;
	left: 0;
	width: 10px;
	height: 10px;
	content: " ";
	z-index: 999999;
}

@media only screen and (min-width : 1201px) {.mq-block {background-color: red}}
@media only screen and (max-width : 1200px) {.mq-block {background-color: orange}}
@media only screen and (max-width : 992px) {.mq-block {background-color: yellow}}
@media only screen and (max-width : 768px) {.mq-block {background-color: blue}}
@media only screen and (max-width : 480px) {.mq-block {background-color: green}}
@media only screen and (max-width : 320px) {.mq-block {background-color: purple}}

// Media Queries
@mixin mq($media-query) {
    $mq-xl: "(min-width: 1201px)"; 	// red
    $mq-lg: "(max-width: 1200px)"; 	// orange
    $mq-md: "(max-width: 992px)"; 	// yellow
    $mq-sm: "(max-width: 768px)"; 	// blue
    $mq-xs: "(max-width: 480px)"; 	// green
    $mq-xxs: "(max-width: 320px)"; 	// purple

    @if $media-query == xs {
        @media #{$mq-xs} {
            @content;
        }
    } @else if $media-query == sm {
        @media #{$mq-sm} {
            @content;
        }
    } @else if $media-query == md {
        @media #{$mq-md} {
            @content;
        }
    } @else if $media-query == lg {
        @media #{$mq-lg} {
            @content;
        }
    } @else if $media-query == xl {
        @media #{$mq-xl} {
            @content;
        }
    }
}

// Helpers
@mixin ol($c:red) {
	outline: 1px solid $c;
}

@mixin responsive() {
	width: 100%;
	max-width: 100%;
	height: auto;
}

@mixin box-shadow($h:4px, $v:4px, $blur:0, $spread:0, $color:darken($body-bg,5%)) {
	-webkit-box-shadow: $h $v $blur $spread $color;
			box-shadow: $h $v $blur $spread $color;
}

@mixin border-radius($radius) {
	-webkit-border-radius: $radius;
			border-radius: $radius;
	background-clip: padding-box;
}

// Flexible alignment for elements - center (default), vertical, horizontal or cancel for child elements
@mixin align($type) {

	@if $type == horizontal {
	    position: absolute;
	    top: 50%;
	    -webkit-transform: translate(0, -50%);
	    	-ms-transform: translate(0, -50%);
	    		transform: translate(0, -50%);
	} @else if $type == vertical {
	    position: relative;
	    left: 50%;
	    -webkit-transform: translate(-50%, 0%);
	    	-ms-transform: translate(-50%, 0%);
	    		transform: translate(-50%, 0%);
	} @else if $type == cancel { // CANCEL mixin align for child elements
	    position: relative;
	    top: 0;
	    left: 0;
	    -webkit-transform: translate(0%, 0%);
	    	-ms-transform: translate(0%, 0%);
	    		transform: translate(0%, 0%);
	} @else if $type == parent { // Use on parent elements IF needed
		-webkit-transform-style: preserve-3d;
		   -moz-transform-style: preserve-3d;
				transform-style: preserve-3d;
	} @else {
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
			-ms-transform: translate(-50%, -50%);
				transform: translate(-50%, -50%);
	}

}

// General Transition mixin
@mixin transition($selector:all, $animation:ease, $duration:.4s) {
	-webkit-transition:$selector $animation $duration;
	   -moz-transition:$selector $animation $duration;
	transition:$selector $animation $duration;
}

// Transforms
@mixin scale($amount:1.5) {
	-webkit-transform: scale($amount);
	   -moz-transform: scale($amount);
			transform: scale($amount);
}

@mixin rotate($degrees:-20deg) {
	-webkit-transform: rotate($degrees);
	   -moz-transform: rotate($degrees);
			transform: rotate($degrees);
}

@mixin translate($x:100, $y:100) {
	-webkit-transform: translate($x, $y);
	   -moz-transform: translate($x, $y);
			transform: translate($x, $y);
}

@mixin grayscale($percentage:100%) {
	-webkit-filter: grayscale($percentage);
	   -moz-filter: grayscale($percentage);
		-ms-filter: grayscale($percentage);
		 -o-filter: grayscale($percentage);
	filter: grayscale($percentage);
	filter: url(grayscale.svg); /* Firefox 4+ */
	filter: gray; /* IE 6-9 */
}

// CSS image masks and effects
@mixin mask($type: linear, $start: center top, $stop: center bottom, $color-1: rgba(0,0,0,1), $color-2: rgba(0,0,0,.6) ) {
	mask-image: -webkit-gradient($type, $start, $stop,
		color-stop(0.00,  $color-1),
		color-stop(0.35,  $color-1),
		color-stop(0.50,  $color-2),
		color-stop(0.65,  $color-2),
		color-stop(1.00,  $color-2)
		);
}

@mixin blur($length: 5px) {
	-webkit-filter: blur($length);
			filter: blur($length);
}

// Hover effects
/* Overline From Center */
@mixin hover-center($position: top, $border-color: $brand-primary, $border-height: 4px, $speed: 0.3s) {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	overflow: hidden;
	:before {
		content: "";
		position: absolute;
		z-index: -1;

		@if $position == top {
			top: 0;
		} @else if $position == bottom {
			bottom: 0;
		} @else {
			top: 0;
		}

		right: 50%;
		left: 50%;
		height: $border-height;
		background: $border-color;
		-webkit-transition-property: left, right;
		transition-property: left, right;
		-webkit-transition-duration: $speed;
		transition-duration: $speed;
		-webkit-transition-timing-function: ease-out;
		transition-timing-function: ease-out;
	}
	:hover:before,
	:focus:before,
	:active:before {
		left: 0;
		right: 0;
	}

}

// Equal columns & centering helper classes
// --------------------------------------------------
// 5 columns CLASS
.col-lg-five {@include make-lg-column(2.4)}
.col-md-five { @include make-md-column(2.4)}
.col-sm-five{ @include make-sm-column(2.4)}

// 7 columns CLASS
.col-lg-seven {@include make-lg-column(1.714)}
.col-md-seven { @include make-md-column(1.714)}
.col-sm-seven{ @include make-sm-column(1.714)}

// Related helper classes
.col-md-push-five {@include make-md-column-push(2.4)}
.col-md-pull-five {@include make-md-column-pull(2.4)}
.col-md-offset-five {@include make-md-column-offset(2.4)}
.col-md-push-seven {@include make-md-column-push(1.714)}
.col-md-pull-seven {@include make-md-column-pull(1.714)}
.col-md-offset-seven {@include make-md-column-offset(1.714)}

// Centering columns
// Add to .row (ie <div class="row row-centered">)
.row-centered {
    text-align: center;
    > [class*="col-"] {
        display: inline-block;
        float: none;
    }
}