dist/css3/_background.scss in bourbon-3.2.4 vs dist/css3/_background.scss in bourbon-4.0.0.rc1

@@ -1,103 +1,55 @@
 //************************************************************************//
 // Background property for adding multiple backgrounds using shorthand
 // notation.
 //************************************************************************//
 
-@mixin background(
-  $background-1       , $background-2: null,
-  $background-3: null, $background-4: null,
-  $background-5: null, $background-6: null,
-  $background-7: null, $background-8: null,
-  $background-9: null, $background-10: null,
-  $fallback: null
-) {
-  $backgrounds: $background-1, $background-2,
-                $background-3, $background-4,
-                $background-5, $background-6,
-                $background-7, $background-8,
-                $background-9, $background-10;
+@mixin background($backgrounds...) {
+  $webkit-backgrounds: ();
+  $spec-backgrounds: ();
 
-  $fallback-color: false;
-  @if (type-of($fallback) == color) or ($fallback == "transparent") {
-    $fallback-color: $fallback;
-  }
-  @else {
-    $fallback-color: _extract-background-color($backgrounds);
-  }
+  @each $background in $backgrounds {
+    $webkit-background: ();
+    $spec-background: ();
+    $background-type: type-of($background);
 
-  @if $fallback-color {
-    background-color: $fallback-color;
-  }
-  background: _background-add-prefix($backgrounds, webkit);
-  background: _background-add-prefix($backgrounds);
-}
+    @if $background-type == string or list {
+      $background-str: if($background-type == list, nth($background, 1), $background);
 
-@function _extract-background-color($backgrounds) {
-  $final-bg-layer: nth($backgrounds, length($backgrounds));
-  @if type-of($final-bg-layer) == list {
-    @for $i from 1 through length($final-bg-layer) {
-      $value: nth($final-bg-layer, $i);
-      @if type-of($value) == color {
-        @return $value;
+      $url-str:       str-slice($background-str, 0, 3);
+      $gradient-type: str-slice($background-str, 0, 6);
+
+      @if $url-str == "url" {
+        $webkit-background: $background;
+          $spec-background: $background;
       }
-    }
-  }
-  @return false;
-}
 
-@function _background-add-prefix($backgrounds, $vendor: false) {
-  $backgrounds-prefixed: ();
+      @else if $gradient-type == "linear" {
+        $gradients: _linear-gradient-parser("#{$background}");
+        $webkit-background: map-get($gradients, webkit-image);
+        $spec-background:   map-get($gradients, spec-image);
+      }
 
-  @for $i from 1 through length($backgrounds) {
-    $shorthand: nth($backgrounds, $i); // Get member for current index
-    $type: type-of($shorthand); // Get type of variable - List (gradient) or String (image)
-
-    // If shorthand is a list (gradient)
-    @if $type == list {
-      $first-member: nth($shorthand, 1); // Get first member of shorthand
-
-      // Linear Gradient
-      @if index(linear radial, nth($first-member, 1)) {
-        $gradient-type: nth($first-member, 1); // linear || radial
-        $gradient-args:      false;
-        $gradient-positions: false;
-        $shorthand-start:    false;
-        @if type-of($first-member) == list { // Linear gradient plus additional shorthand values - lg(red,orange)repeat,...
-          $gradient-positions: nth($first-member, 2);
-          $gradient-args:      nth($first-member, 3);
-          $shorthand-start: 2;
-        }
-        @else { // Linear gradient only - lg(red,orange),...
-          $gradient-positions: nth($shorthand, 2);
-          $gradient-args:      nth($shorthand, 3); // Get gradient (red, blue)
-        }
-
-        $gradient-positions: _gradient-positions-parser($gradient-type, $gradient-positions);
-        $gradient: _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor);
-
-        // Append any additional shorthand args to gradient
-        @if $shorthand-start {
-          @for $j from $shorthand-start through length($shorthand) {
-            $gradient: join($gradient, nth($shorthand, $j), space);
-          }
-        }
-        $backgrounds-prefixed: append($backgrounds-prefixed, $gradient, comma);
+      @else if $gradient-type == "radial" {
+        $gradients: _radial-gradient-parser("#{$background}");
+        $webkit-background: map-get($gradients, webkit-image);
+        $spec-background:   map-get($gradients, spec-image);
       }
-      // Image with additional properties
+
       @else {
-        $backgrounds-prefixed: append($backgrounds-prefixed, $shorthand, comma);
+        $webkit-background: $background;
+          $spec-background: $background;
       }
     }
-    // If shorthand is a simple string (color or image)
-    @else if $type == string {
-      $backgrounds-prefixed: join($backgrounds-prefixed, $shorthand, comma);
+
+    @else {
+      $webkit-background: $background;
+        $spec-background: $background;
     }
+
+    $webkit-backgrounds: append($webkit-backgrounds, $webkit-background, comma);
+    $spec-backgrounds:   append($spec-backgrounds,   $spec-background,   comma);
   }
-  @return $backgrounds-prefixed;
-}
 
-//Examples:
-  //@include background(linear-gradient(top, orange, red));
-  //@include background(radial-gradient(circle at 40% 40%, orange, red));
-  //@include background(url("/images/a.png") no-repeat, linear-gradient(orange, red));
-  //@include background(url("image.png") center center, linear-gradient(orange, red), url("image.png"));
+  background: $webkit-backgrounds;
+  background: $spec-backgrounds;
+}