The Mixins A set of my base sass mixins Mostly just for grab-n-go

The Mixins

//============  Mixins  ============

// Box Shadows

@mixin basic-shadow( $horz:0, $vert:2px, $raid:5px, $colr:rgba($glass-color, 0.2)) {
	-webkit-box-shadow: $horz $vert $raid $colr;
	-moz-box-shadow: $horz $vert $raid $colr;
	box-shadow: $horz $vert $raid $colr;
}

@mixin gain-shadow( $horz:0, $vert:2px, $raid:5px, $gain:2px, $colr:rgba($glass-color, 0.2)) {
	-webkit-box-shadow: $horz $vert $raid $gain $colr;
	-moz-box-shadow: $horz $vert $raid $gain $colr;
	box-shadow: $horz $vert $raid $gain $colr;
}

@mixin inset-shadow( $horz:0, $vert:2px, $raid:5px, $gain:2px, $colr:rgba($glass-color, 0.2)) {
	-webkit-box-shadow: $horz $vert $raid $gain $colr;	
	-moz-box-shadow: $horz $vert $raid $gain $colr;
	box-shadow: $horz $vert $raid $gain $colr;
}

// Text Shadow

@mixin text-shadow($horizOffset, $vertOffset, $blur, $color) {
	-webkit-text-shadow: $horizOffset $vertOffset $blur $color;
	-moz-text-shadow: $horizOffset $vertOffset $blur $color;
	-ms-text-shadow: $horizOffset $vertOffset $blur $color;
	-o-text-shadow: $horizOffset $vertOffset $blur $color;
	text-shadow: $horizOffset $vertOffset $blur $color;
}

// Transitions & Transforms

@mixin transition($property, $duration) {
	-webkit-transition: $property $duration ease-in-out;
	-moz-transition: $property $duration ease-in-out;
	-o-transition: $property $duration ease-in-out;
	transition: $property $duration ease-in-out;
}

@mixin rotate($degrees) {
	-webkit-transform: rotate($degrees);
	-moz-transform: rotate($degrees);
	-ms-transform: rotate($degrees);
	-o-transform: rotate($degrees);
	transform: rotate($degrees);
}

// Gradients

@mixin gradient($from, $to) {
	background-color: $from;
	background-image: -moz-linear-gradient($from, $to);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from($from), to($to));
	background-image: -webkit-linear-gradient($from, $to);
	background-image: -o-linear-gradient($from, $to);
}

@mixin gradient-horizontal($startColor: #555, $endColor: #333) {
  background-color: $endColor;
  background-image: -moz-linear-gradient(left, $startColor, $endColor); // FF 3.6+
  background-image: -webkit-gradient(linear, 0 0, 100% 0, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
  background-image: -webkit-linear-gradient(left, $startColor, $endColor); // Safari 5.1+, Chrome 10+
  background-image: -o-linear-gradient(left, $startColor, $endColor); // Opera 11.10
  background-image: linear-gradient(to right, $startColor, $endColor); // Standard, IE10
  background-repeat: repeat-x;
}


// Background Effects

@mixin background-size($value){
	-webkit-background-size: $value;
	-moz-background-size: $value;
	-o-background-size: $value;
	background-size: $value;
}