Sass utilitis

sass-utils.scss

//@import "compass"; // Compass Required, or not 

//
// Use with modernizr.js for fallbacks IE or old-browsers
//
@mixin nop( $property ) {
	.no-#{ $property } & {
		@content;
	}
}

//
// Mother fucker ie, oh shit!
//
@mixin ie( $version )  {
	@if $version == all {
		.ie & {
			@content;
		}
	} @else {
		.lt-ie#{$version} & {
			@content;
		}
	}
}

//
// Backgrounds rgba transparency
//
@mixin rgba( $color, $alpha: 1 ) {
	$rgba: rgba( $color, $alpha) ;
	$ie-hex: ie-hex-str( $rgba );
	background-color: transparent;
	background-color: $rgba;
	@include nop( rgba ) { // For fallbacks
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#{ $ie-hex },endColorstr=#{ $ie-hex });
		zoom: 1;
	}
}

//
// Block centered, example .wrapper
//
@mixin center-block( $width: auto ) {
	width: $width;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

//
// Centered vertical absolute
//
@mixin center-absolute($w, $h) {
	width: $w;
	height: $h;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -($h/2);
	margin-left: -($w/2);
}

//
// centraliza horizontal absolute
//
@mixin center-horizontal($w) {
	width: $w;
	position: absolute;
	left: 50%;
	margin-left: -($w/2);
}

//
// Min height element
//
@mixin min-height( $height, $type: px ) {
	height: auto !important;
	height: expression(this.scrollHeight <= #{$height} ? #{$height} : "auto");
	min-height: $height + $type;

	*height: $height + $type;
}

//
// Extend clearfix and not rendering this class clearfix
//
%clearfix {
	&:before,
	&:after {
		content: " "; // 1
		display: table; // 2 
	}
	&:after {
		clear: both;
	}
}

//
// Transforms
//

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

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

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

// TranslateRotate
@mixin translateRotate( $x, $y, $z ) {
	@include transform(translate($x, $y) rotate($z));
}

// Skew
@mixin skew( $x, $y ) {
	@include transform(skew($x, $y));
	-ms-transform: skewX($x) skewY($y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
}

// Translate3D
@mixin translate3d( $x, $y, $z ) {
	@include transform(translate3d( $x, $y, $z ));
}

// Rotate X
@mixin rotateX( $val ) {
	@include transform(rotateX( $val ));
}

// Rotate Y
@mixin rotateY( $val ) {
	@include transform(rotateY( $val ));
}

// Perspective
@mixin perspective( $val ) {
	-webkit-perspective:		$val;
	-moz-perspective:			$val;
	perspective:				$val;
}

// Perspective Origin
@mixin perspective-origin( $val ) {
	-webkit-perspective-origin:	$val;
	-moz-perspective-origin:	$val;
		perspective-origin:		$val;
}

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

//
// Keyframes
//
@mixin keyframes($name) {
	@-webkit-keyframes #{$name} {
		@content; 
	}
	@-moz-keyframes #{$name} {
		@content;
	}
	@-ms-keyframes #{$name} {
		@content;
	}
	@keyframes #{$name} {
		@content;
	} 
}

// Placeholder
@mixin placeholder() {
	&::-webkit-input-placeholder {
		@content;
	}
	&:-moz-placeholder { // Firefox 18-
		@content;
	}
	&::-moz-placeholder {  // Firefox 19+
		@content;
	}
	&:-ms-input-placeholder {
		@content;
	}
}

//
// Arrows with css pure
//
@mixin arrow( $direction, $size, $color ) {
		border: $size solid transparent;
		@if $direction == top {
			border-bottom: $size solid $color !important;
		}
		@else if $direction == left {
			border-right: $size solid $color !important;
		}
		@else if $direction == right {
			border-left: $size solid $color !important;
		}
		@else if $direction == bottom {
			border-top: $size solid $color !important;
		}
		width: 0 !important;
		height: 0 !important;
		position: absolute;
}

//
// Media queries simple
//
@mixin media( $min, $max: 0, $type: width ) {
	@if $max >= 1 {
		& {
			@media ( min-#{$type}: #{ $min } ) and ( max-#{$type}: #{ $max } ) {
				@content;
			}
		}
	} @else {
		& {
			@media ( min-#{$type}: #{ $min } ) {
				@content;
			}
		}
	}
}

//
// Background image, for fallback IE's and SAFARI 6
//
@mixin background-image( $img, $pos: 0 0, $repeat: no-repeat, $size: 100% auto, $color: transparent ) {
	background-color: $color;
	background-image: url("#{$img}");
	background-position: $pos;
	background-repeat: $repeat;
	background-size: $size;
}