Sass @mixin backgrounds-v2.1

_backgrounds-v2.1.scss

//
// Sass mixin backgrounds v2.1
// sass version 2.x
//
// Copyright 2012, Yoshihito Fujiwara
// MIT License.
//
// Date: 2012-07-25
// Author: Yoshihito Fujiwara
//
// 
// Capable Browser
// chrome 19
// Firefox 12
// Opera12
// safari5
// Android Browser 2.3 later 
// iOS safari4.1 later 
//
//
// How To Use
//
// $backgrounds-prefixes
// Target browser settings. ie not supported.
// -webkit-, -moz-, -o-, '';
//
// $backgrounds-old-webkit
// Response to the gradient of the old webkit
//
// backgrounds($backgrounds-images, $backgrounds-colors, $backgrounds-position)
//
// $backgrounds-images
//　Specify image. Multiple can be installed. No argument, no image.
// value: background-image value
// 
// $backgrounds-colors
// Specify the color. If you specify more than one of the gradient
// value: color code, false, transparent,
//
// $backgrounds-position
// Direction of the gradient. Switching point of the gradient. Angle can not be specified.
// value: top, left, number[0-100]
//
// .example {
// 	@include backgrounds(#{url(../img1.png) no-repeat 100% 50%, url(../img2.png) no-repeat 100% 50%}, #fff #ccc #999, top 80 100);
// }
//


// ******************************************************************** initial value

// Not implemented
// Not support a gradient up to "ie9"
// If true, return the intermediate value of specified color
// If false, or if there is no color specified, does not return a value.
// $backgrounds-ms : true;

$backgrounds-prefixes  : -webkit-, -moz-, -o-, '' !default;
$backgrounds-old-webkit: true !default;
$backgrounds-images    : false !default;
$backgrounds-colors    : false !default;
$backgrounds-position  : top !default;


// ******************************************************************** @function

// Not implemented
// @function backgrounds-ms
// Returns an intermediate value of specified color (roughly)
@function backgrounds-ms($fn-backgrounds-images, $fn-backgrounds-colors){
	$value: '';
	$colors: nth($fn-backgrounds-colors, 1) / length($fn-backgrounds-colors);
	@for $i from 2 through length($fn-backgrounds-colors) {
		$colors: $colors + nth($fn-backgrounds-colors, $i) / length($fn-backgrounds-colors);
	}
	@if $fn-backgrounds-images and $fn-backgrounds-images != "" {
		$value: $colors $fn-backgrounds-images;
	} @else { 
		$value: $colors;
	}
	@return $value;
}


// @function backgrounds-old-webkit
// Returns the value of the background　for old webkit style
@function backgrounds-old-webkit($fn-backgrounds-images, $fn-backgrounds-colors, $fn-backgrounds-position){
	$value: '';
	@if $fn-backgrounds-images and $fn-backgrounds-images != "" {
		$value: $fn-backgrounds-images, -webkit-gradient(linear, gradient-direction-old-webkit($fn-backgrounds-position), gradient-old-webkit($fn-backgrounds-colors, $fn-backgrounds-position));
	} @else {
		$value: -webkit-gradient(linear, gradient-direction-old-webkit($fn-backgrounds-position), gradient-old-webkit($fn-backgrounds-colors, $fn-backgrounds-position));
	}
	@return $value;
}


// @function gradient-direction-old-webkit
// Returns the direction of the gradient　for old webkit style
@function gradient-direction-old-webkit($fn-gradient-position){
	@if nth($fn-gradient-position, 1) == left {
		@return left top, right top;
	}
	@return left top, left bottom;
}


// @function gradient-old-webkit
// Returns the value of the gradient　for old webkit style
@function gradient-old-webkit($fn-gradient-colors, $fn-gradient-position){
	$i: 0;
	$count: 1;
	$length: length($fn-gradient-colors) - 1;
	$position: 100 / $length; // old-webkit

	$value: from(#{nth($fn-gradient-colors, 1)}) + ', ';
	@if length($fn-gradient-colors) == length($fn-gradient-position){
		@for $i from 2 through  $length {
			$value: $value + color-stop(nth($fn-gradient-position, $i) * 0.01, #{nth($fn-gradient-colors, $i)}) + ', ';
		}
	} @else {
		@for $i from 2 through  $length {
			$value: $value + color-stop($position * $count * 0.01, #{nth($fn-gradient-colors, $i)}) + ', ';
			$count: $count + 1;
		}
	}
	@return	$value + to(nth($fn-gradient-colors, $length + 1));
}


// @function backgrounds
// Returns the value of the background
@function backgrounds($fn-backgrounds-images, $fn-backgrounds-colors, $fn-backgrounds-position, $fn-prefix){
	$value: '';
	$direction : top;
	@if nth($fn-backgrounds-position, 1) == left {
		$direction: left;
	}

	@if $fn-backgrounds-images and $fn-backgrounds-images != "" {
		$value: $fn-backgrounds-images, #{$fn-prefix}linear-gradient($direction, gradient($fn-backgrounds-colors, $fn-backgrounds-position));
	} @else {
		$value: #{$fn-prefix}linear-gradient($direction, gradient($fn-backgrounds-colors, $fn-backgrounds-position));
	}
	@return $value;
}


// @function gradient
// Returns the value of the gradient
@function gradient($fn-gradient-colors, $fn-gradient-position){
	$i: 0;
	$count: 1;
	$length: length($fn-gradient-colors) - 1;

	$value: nth($fn-gradient-colors, 1) + ', ';
	@if length($fn-gradient-colors) == length($fn-gradient-position){
		@for $i from 2 through $length {
			$value: $value + nth($fn-gradient-colors, $i) + ' ' + percentage(nth($fn-gradient-position, $i) / 100) + ', ';
		}
	} @else {
		@for $i from 2 through $length {
			$value: $value + nth($fn-gradient-colors, $i) + ', ';
		}
	}
	@return #{$value + nth($fn-gradient-colors, $length + 1)};
}


// ******************************************************************** @mixin

@mixin backgrounds($backgrounds-images, $backgrounds-colors, $backgrounds-position) {
	// Initialization of argument
	@if type-of(nth($backgrounds-images, 1)) == color {
		@if type-of(nth($backgrounds-colors, 1)) != color {
			$backgrounds-position: $backgrounds-colors;
		}
		$backgrounds-colors: $backgrounds-images;
		$backgrounds-images: '';
	}

	@if length($backgrounds-colors) > 1 {
		@each $prefix in $backgrounds-prefixes {
			// for old webkit
			@if $backgrounds-old-webkit and $prefix == -webkit- {
				background: backgrounds-old-webkit($backgrounds-images, $backgrounds-colors, $backgrounds-position);
			}
			background: backgrounds($backgrounds-images, $backgrounds-colors, $backgrounds-position, $prefix);

			//	Not implemented
			//	@if $backgrounds-ms and $prefix == -ms- {
			//		background: backgrounds-ms($backgrounds-images, $backgrounds-colors);
			//	} @else if $prefix != -ms- {
			//		background: backgrounds($backgrounds-images, $backgrounds-colors, $backgrounds-position, $prefix);
			//	}
		}
	} @else {
		@if $backgrounds-colors and $backgrounds-colors != "" {
			background: $backgrounds-colors #{$backgrounds-images};
		} @else {
			background: #{$backgrounds-images};
		}
	}
}

Sass グラデーション指定可能な万能型mixin backgrounds | CUT UP WORKS
http://cutupworks.ldblog.jp/archives/12554555.html

下記の通り入力するとエラーが出てしまいます。

.example-3 {
    @include backgrounds(rgba(#fff, .2) rgba(#fff, .8) rgba(#fff, .5) rgba(#fff, .1));
}

error sass/hoge.scss (Line 5: Mixin backgrounds is missing argument $backgrounds-colors.)

また、下記のように入力すると出力されるものの、正しく出力されないようです。

.example-3 {
  @include backgrounds('',rgba(#fff, 0) rgba(#fff, 0.8), 0 80);
}

.example-3 {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(0.8, rgba(255, 255, 255, 0.8)), color-stop(0, rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.8)));
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8) 80%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8));
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8) 80%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8));
  background: -o-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8) 80%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8));
  background: linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8) 80%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8));
}

使用したバージョン

Sass 3.4.5
Compass 1.0.1

報告ありがとうございます。
sass 2系で開発された古いバージョンで3系にあわせたアップデートは行っておりませんでした。
申し訳ありませんが、このバージョンでアップデートを打ち切りました。

現在、私はbourbonを使用してコーディングを行っております。
参考までに。
http://bourbon.io/