Collection of Sass mixins - Work in progress

_mixins.sass

// Browser Prefixes
@mixin transform($transforms) {
	-webkit-transform: $transforms;
	-moz-transform: $transforms;
	-ms-transform: $transforms;
	transform: $transforms;
}

// Rotate
@mixin rotate ($deg) { 
	@include transform(rotate(#{$deg}deg));
}

// Scale
@mixin scale($scale) {
	@include transform(scale($scale));
}

// Translate
@mixin translate ($x, $y) {
	@include transform(translate($x, $y));
}

// Skew
@mixin skew ($x, $y) {
	@include transform(skew(#{$x}deg, #{$y}deg));
}

// Transform Origin
@mixin transform-origin ($origin) {
	-webkit-transform-origin: $origin;
	-moz-transform-origin: $origin;
	-ms-transform-origin: $origin;
	transform-origin: $origin;
}

// Retina Background images
@mixin background-2x($path, $ext: "png", $w: auto, $h: auto, $pos: left top, $repeat: no-repeat) {

	$at1x_path: "#{$path}.#{$ext}";
	$at2x_path: "#{$path}@2x.#{$ext}";

	background-image: url("#{$at1x_path}");
	background-size: $w $h;
	background-position: $pos;
	background-repeat: $repeat;

	@media all and (-webkit-min-device-pixel-ratio : 1.5),
		all and (-o-min-device-pixel-ratio: 3/2),
		all and (min--moz-device-pixel-ratio: 1.5),
		all and (min-device-pixel-ratio: 1.5) {
		background-image: url("#{$at2x_path}"); 
	}
}

// 3D shadow box
@mixin shadow-box-3d($size, $color){

	$all: ();
	@for $i from 1 through $size {
    	$all: append($all, $i * 1px $i * 1px 0px $color, comma)
    };

    box-shadow: $all;
}

// Bootstrap breakpoints (if included)
@mixin bp($size){
	@if $size == 'small' and variable-exists(screen-sm-min) {
		@media all and (min-width: $screen-sm-min) { @content; }
	} @else if $size == 'medium' and variable-exists(screen-md-min) {
		@media all and (min-width: $screen-md-min) { @content; }
	} @else if $size == 'large' and variable-exists(screen-lg-min) {
		@media all and (min-width: $screen-lg-min) { @content; }
	}
}