SASS gradiant @mixin

gradiant-mixin.scss

// this mixin can be used in any sass template to easily deploy 
// consistent gradients quickly. Just change the values of $start 
// and $end to the colors you want your gradient to travel between. 
// You can pass different colors when calling the mixin like this:

// > @include grad(#279333,#192566)

// Better still you can define color variables and do it like this

// > $yellow = #f30;
// > @include grad($yellow,$yellow*1.2)
// ------------------------------------- //

@mixin grad ($start:#eee, $end:#ccc){
	background: $start; /* Old browsers */
	background: -moz-linear-gradient(top, $start 0%, $end 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$start), color-stop(100%,$end)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, $start 0%,$end 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, $start 0%,$end 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, $start 0%,$end 100%); /* IE10+ */
	background: linear-gradient(top, $start 0%,$end 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start', endColorstr='$end',GradientType=0 ); /* IE6-9 */
	}