Basic sass mixins for CSS3 and some helpers

_mixins.scss

@function black($opacity){
	@return rgba(0,0,0,$opacity)
}
@function white($opacity){
	@return rgba(255,255,255,$opacity)
}
@function grid($col){
	@return (($grid * $col) - $gutter)
}
// Font mixin
@mixin font ($variant) {
	@if $variant == "bold-14" {
		font: bold 14px Roboto;
	} @else if $variant == "bold-11" {
		font: bold 11px/1 Roboto;       
	} @else if $variant == "bold-10" {
		font: bold 10px/15px Roboto;
		letter-spacing: 0.1em;
		text-transform: uppercase;      
	} @else if $variant == "light-25" {
		font: 100 25px Roboto;
		letter-spacing: -0.01em;
		
	} @else if $variant == "light-70"{
		font: 100 70px Roboto;
	} @else {
		font: normal 18px/1 Roboto;
	}
}

@mixin bg($filename,$repeat: no-repeat,$position:0 0, $color: transparent) {
	background: $color url(#{$imagedir}#{$filename}#{$ver}) $repeat $position;
}
@mixin bg-image($filename) {
	background-image: url(#{$imagedir}#{$filename}#{$ver});
}

@mixin m-bg($filename,$repeat: no-repeat,$position:0 0, $color: transparent) {
	background: $color url(#{$m-imagedir}#{$filename}#{$m-ver}) $repeat $position;
}
@mixin m-bg-image($filename) {
	background-image: url(#{$m-imagedir}#{$filename}#{$m-ver});
}

@mixin background-gradient($startColor: #3C3C3C, $endColor: #999999, $position: top) {
	background-color: $startColor;
	background-image: -webkit-gradient(linear, left top, left bottom, from($startColor), to($endColor));
	background-image: -webkit-linear-gradient(top, $startColor, $endColor);
	background-image:    -moz-linear-gradient(top, $startColor, $endColor);
	background-image:     -ms-linear-gradient(top, $startColor, $endColor);
	background-image:      -o-linear-gradient(top, $startColor, $endColor);
	background-image:         linear-gradient(top, $startColor, $endColor);
	filter:            progid:DXImageTransform.Microsoft.gradient(startColorStr=#{$startColor}, EndColorStr=#{$endColor});
}

@mixin background-size($width: 100%, $height: 100%) {
	 -moz-background-size: $width $height;
  -webkit-background-size: $width $height;
		  background-size: $width $height;
}

@mixin border-radius($radius: 5px) {
	-moz-border-radius:    $radius;
	-webkit-border-radius: $radius;
	border-radius:         $radius;
}

@mixin border-radius-separate($topLeftRadius: 5px, $topRightRadius: 5px, $bottomLeftRadius: 5px, $bottomRightRadius: 5px) {
	-webkit-border-top-left-radius:     $topLeftRadius;
	-webkit-border-top-right-radius:    $topRightRadius;
	-webkit-border-bottom-right-radius: $bottomLeftRadius;
	-webkit-border-bottom-left-radius:  $bottomRightRadius;

	-moz-border-radius-topleft:     $topLeftRadius;
	-moz-border-radius-topright:    $topRightRadius;
	-moz-border-radius-bottomright: $bottomLeftRadius;
	-moz-border-radius-bottomleft:  $bottomRightRadius;

	border-top-left-radius:     $topLeftRadius;
	border-top-right-radius:    $topRightRadius;
	border-bottom-right-radius: $bottomLeftRadius;
	border-bottom-left-radius:  $bottomRightRadius;
}
@mixin box($orient: horizontal, $pack: center, $align: center) {
	display: -webkit-box;
	display: -moz-box;
	display: box;

	-webkit-box-orient: $orient;
	-moz-box-orient:    $orient;
	box-orient:         $orient;

	-webkit-box-pack: $pack;
	-moz-box-pack:    $pack;
	box-pack:         $pack;

	-webkit-box-align: $align;
	-moz-box-align:    $align;
	box-align:         $align;
}
@mixin box-rgba($r: 60, $g: 3, $b: 12, $opacity: 0.23, $color: #3C3C3C) {
  background-color: transparent;
  background-color: rgba($r, $g, $b, $opacity);
			filter: progid:DXImageTransform.Microsoft.gradient(startColorstr#$color,endColorstr=$color);
			zoom:   1;
}

@mixin box-shadow($x: 2px, $y: 2px, $blur: 5px, $color: rgba(0,0,0,.4), $size: 0, $inset: "") {

	-webkit-box-shadow: #{$inset} $x $y $blur $size $color;
	-moz-box-shadow: #{$inset} $x $y $blur $size $color;
	box-shadow: #{$inset} $x $y $blur $size $color;
}
@mixin box-sizing($type: border-box) {
	-webkit-box-sizing:   $type;
	-moz-box-sizing:      $type;
	box-sizing:           $type;
}
@mixin columns($count: 3, $gap: 10) {
	-webkit-column-count: $count;
	-moz-column-count:    $count;
	column-count:         $count;

	-webkit-column-gap:   $gap;
	-moz-column-gap:      $gap;
	column-gap:           $gap;
}
@mixin double-borders($colorOne: #3C3C3C, $colorTwo: #999999, $radius: 0) {
	border: 1px solid $colorOne;

	-webkit-box-shadow: 0 0 0 1px $colorTwo;
	-moz-box-shadow:    0 0 0 1px $colorTwo;
	box-shadow:         0 0 0 1px $colorTwo;

	@include border-radius( $radius );
}
@mixin flex($value: 1) {
	-webkit-box-flex: $value;
	-moz-box-flex:    $value;
	box-flex:         $value;
}
@mixin flip($scaleX: -1) {
	-moz-transform:    scaleX($scaleX);
	-o-transform:      scaleX($scaleX);
	-webkit-transform: scaleX($scaleX);
	transform:         scaleX($scaleX);
	filter:            FlipH;
	-ms-filter:        "FlipH";
}
@mixin font-face($fontFamily: myFont, $eotFileSrc: 'myFont.eot', $woffFileSrc: 'myFont.woff', $ttfFileSrc: 'myFont.ttf') {
  font-family: $fontFamily;
  src: url($eotFileSrc)  format('eot'),
	   url($woffFileSrc) format('woff'),
	   url($ttfFileSrc)  format('truetype');
}
@mixin opacity($opacity: 0.5) {
	filter:         alpha(opacity=($opacity * 100));
	-ms-filter:     "progid:DXImageTransform.Microsoft.Alpha(Opacity=" + ($opacity * 100) + ")";
	-moz-opacity:   $opacity;
	-khtml-opacity: $opacity;
	opacity:        $opacity;
}

@mixin outline-radius($radius: 5px) {
	-webkit-outline-radius: $radius;
	-moz-outline-radius:    $radius;
	outline-radius:         $radius;
}
@mixin resize($direction: both) {
	-webkit-resize: $direction;
	-moz-resize:    $direction;
	resize:         $direction;
}
@mixin rotate($deg: 0, $m11: 0, $m12: 0, $m21: 0, $m22: 0) {
	 -moz-transform: rotate($deg + deg);
	   -o-transform: rotate($deg + deg);
  -webkit-transform: rotate($deg + deg);
	  -ms-transform: rotate($deg + deg);
		  transform: rotate($deg + deg);
}
@mixin text-shadow($x: 2px, $y: 2px, $blur: 5px, $color: rgba(0,0,0,.4)) {
	text-shadow: $x $y $blur $color;
}
@mixin transform($params, $origin: 50% 50%, $persp: 300px) {
	-webkit-transform:			$params;
	-o-transform:				$params;
	-moz-transform:				$params;
	-ms-transform:				$params;
	transform:					$params;

	-webkit-transform-origin:	$origin;
	-o-transform-origin:		$origin;
	-moz-transform-origin:		$origin;
	-ms-transform-origin:		$origin;
	transform-origin:			$origin;

	-webkit-perspective:		$persp;
	-o-perspective:				$persp;
	-moz-perspective:			$persp;
	-ms-perspective:			$persp;
	perspective:				$persp;
}
@mixin transition($what: all, $length: 1s, $easing: ease-in-out) {
	-moz-transition:    $what $length $easing;
	-o-transition:      $what $length $easing;
	-webkit-transition: $what $length $easing;
	-ms-transition:     $what $length $easing;
	transition:         $what $length $easing;

}
@mixin triple-borders($colorOne: #3C3C3C, $colorTwo: #999999, $colorThree: #000000, $radius: 0) {
	border: 1px solid $colorOne;

	@include border-radius($radius);

	-webkit-box-shadow: 0 0 0 1px $colorTwo, 0 0 0 2px $colorThree;
	-moz-box-shadow:    0 0 0 1px $colorTwo, 0 0 0 2px $colorThree;
	box-shadow:         0 0 0 1px $colorTwo, 0 0 0 2px $colorThree;
}

@mixin animation($name, $duration: 1s, $easing: ease-out, $delay: 0, $iteration: infinite, $direction: normal, $fill: none){
	-o-animation:       $name $duration $easing $delay $iteration $direction $fill;
	-webkit-animation:  $name $duration $easing $delay $iteration $direction $fill;
	-moz-animation:     $name $duration $easing $delay $iteration $direction $fill;
	 animation:         $name $duration $easing $delay $iteration $direction $fill;
}