Generated by SassMeister.com.

SassMeister-input-HTML.html

<div>
  
  
</div>

SassMeister-input.scss

// ----
// Sass (v3.3.1)
// Compass (v1.0.0.alpha.18)
// ----

$vendors-no-ms: '-webkit-' '-moz-' '-o-' '' !default;

@mixin gradient($type, $start, $end) {

	$gradient: linear;
	$direction: top;
	$to-direction: bottom;
	$ie-type: 1;
	$degrees: $type;
  
	@if $type == h {
		$direction: left;
		$to-direction: right;
		$ie-type: 1;
	} @else if $type < 360 {
		$direction: #{$degrees}deg;
	}

	background-color: // Old browsers
	rgb(
	(red($start)+red($end)) / 2,
	(green($start)+green($end)) / 2,
	(blue($start)+blue($end)) / 2);
	
	@each $vendor in $vendors-no-ms {
		background: #{$vendor}#{$gradient}-gradient($direction, $start 0%, $end 100%);
	}
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$start}', endColorstr='#{$end}',GradientType=#{$ie-type});
}

div {
  @include gradient(h, rgba(#fff,0.2) , rgba(red,0.2));
  position: absolute;
  height: 100%;
  width: 100%;
}

SassMeister-output.css

div {
  background-color: #ff7f7f;
  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.2) 0%, rgba(255, 0, 0, 0.2) 100%);
  background: -moz-linear-gradient(left, rgba(255, 255, 255, 0.2) 0%, rgba(255, 0, 0, 0.2) 100%);
  background: -o-linear-gradient(left, rgba(255, 255, 255, 0.2) 0%, rgba(255, 0, 0, 0.2) 100%);
  background: linear-gradient(left, rgba(255, 255, 255, 0.2) 0%, rgba(255, 0, 0, 0.2) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(255, 255, 255, 0.2)', endColorstr='rgba(255, 0, 0, 0.2)',GradientType=1);
  position: absolute;
  height: 100%;
  width: 100%;
}

SassMeister-rendered.html

<div>
  
  
</div>