Background-image mixin now supports linear-gradients and radial-gradi…

…ents
thoughtbot · Oct 7, 2011 · a63dade · a63dade
1 parent 56cb8fb
commit a63dade
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 72 deletions.
diff --git a/app/assets/stylesheets/_bourbon.scss b/app/assets/stylesheets/_bourbon.scss
@@ -1,7 +1,6 @@
 // Custom Functions
 @import "functions/golden-ratio";
 @import "functions/grid-width";
-@import "functions/linear-gradient";
 @import "functions/tint-shade";
 
 // CSS3 Mixins

diff --git a/app/assets/stylesheets/css3/_background-image.scss b/app/assets/stylesheets/css3/_background-image.scss
@@ -1,4 +1,9 @@
-// Background image property for support with adding multiple background images with a gradients.
+//************************************************************************//
+// Background-image property for adding multiple background images with
+// gradients, or for stringing multiple gradients together.
+//************************************************************************//
+@import "../functions/linear-gradient";
+@import "../functions/radial-gradient";
 
 @mixin background-image(
   $image-1       , $image-2: false,
@@ -13,88 +18,54 @@
            $image-7, $image-8,
            $image-9, $image-10);
 
-  $assets:    ();
-  $gradients: ();
-  $count: 0;
-
-  //Find all asset images in list
-  @for $i from 1 through length($images) {
-    $type: type-of(nth($images, $i));
+  background-image: add-prefix($images, webkit);
+  background-image: add-prefix($images, moz);
+  background-image: add-prefix($images, ms);
+  background-image: add-prefix($images, o);
+  background-image: add-prefix($images);
+}
 
-    @if $type == list {
-      $count: $count + 1;
-    }
 
-    @else if $type == string {
-      $assets: join($assets, nth($images, $i), comma);
-    }
-  }
+@function add-prefix($images, $vendor: false) {
+  $images-prefixed: ();
 
-  // Find all gradients in list
   @for $i from 1 through length($images) {
-    $type: type-of(nth($images, $i));
+    $type: type-of(nth($images, $i)); // Get type of variable - List or String
 
+    // If variable is a list - Gradient
     @if $type == list {
-      $gradients: append($gradients, nth($images, $i), comma);
-    }
-  }
+      $gradient-type: nth(nth($images, $i), 1); // Get type of gradient (linear || radial)
+      $gradient-args: nth(nth($images, $i), 2); // Get actual gradient (red, blue)
 
-
-  @if $assets {
-    @if $count >= 1 {
-      background-image: $assets, render-gradients($gradients, webkit);
-      background-image: $assets, render-gradients($gradients, moz);
-      background-image: $assets, render-gradients($gradients, ms);
-      background-image: $assets, render-gradients($gradients, o);
-      background-image: $assets, render-gradients($gradients);
-    }
-    @else {
-      background-image: $assets;
+      $gradient: render-gradients($gradient-args, $gradient-type, $vendor);
+      $images-prefixed: append($images-prefixed, $gradient, comma);
     }
-  }
-  @else {
-    @if $count >= 1 {
-      background-image: render-gradients($gradients, webkit);
-      background-image: render-gradients($gradients, moz);
-      background-image: render-gradients($gradients, ms);
-      background-image: render-gradients($gradients, o);
-      background-image: render-gradients($gradients);
+
+    // If variable is a string - Image
+    @else if $type == string {
+      $images-prefixed: join($images-prefixed, nth($images, $i), comma);
     }
   }
+  @return $images-prefixed;
 }
 
-@function render-gradients($gradients, $vendor: false) {
-  @if length($gradients) == 1 {
-    $vendor-gradients: false;
-    @if $vendor {
-      $vendor-gradients: -#{$vendor}-linear-gradient($gradients);
-    }
-    @else if $vendor == false {
-      $vendor-gradients: "linear-gradient(#{$gradients})";
-      $vendor-gradients: unquote($vendor-gradients);
-    }
-    @return $vendor-gradients;
+
+@function render-gradients($gradients, $gradient-type, $vendor: false) {
+  $vendor-gradients: false;
+  @if $vendor {
+    $vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient($gradients);
   }
 
-  @else if length($gradients) >= 2 {
-    $vendor-gradients: ();
-    @for $i from 1 through length($gradients) {
-      @if $vendor {
-        @if $vendor-gradients == () {
-          $vendor-gradients: -#{$vendor}-linear-gradient(nth($gradients, $i));
-        }
-        @else {
-          $vendor-gradients: $vendor-gradients, -#{$vendor}-linear-gradient(nth($gradients, $i));
-        }
-      }
-      @else if $vendor == false {
-        $vendor-gradients: $vendor-gradients, unquote("linear-gradient(#{nth($gradients, $i)})");
-      }
-    }
-    @return $vendor-gradients;
+  @else if $vendor == false {
+    $vendor-gradients: "#{$gradient-type}-gradient(#{$gradients})";
+    $vendor-gradients: unquote($vendor-gradients);
   }
+  @return $vendor-gradients;
 }
 
 //Examples:
-   //@include background-image(url("/images/a.png"), linear-gradient(#ffff00, #999));
-   //@include background-image(url("/images/a.png"), url("/images/b.png"), url("/images/c.png"), linear-gradient(#ffff00 10%, #000 20%));
+  //@include background-image(linear-gradient(top, orange, red));
+  //@include background-image(radial-gradient(50% 50%, cover circle, orange, red));
+  //@include background-image(url("/images/a.png"), linear-gradient(orange, red));
+  //@include background-image(url("image.png"), linear-gradient(orange, red), url("image.png"));
+  //@include background-image(linear-gradient(hsla(0, 100%, 100%, 0.25) 0%, hsla(0, 100%, 100%, 0.08) 50%, transparent 50%), linear-gradient(orange, red);
diff --git a/app/assets/stylesheets/functions/_linear-gradient.scss b/app/assets/stylesheets/functions/_linear-gradient.scss
@@ -14,8 +14,10 @@
     $pos: top; // Default position
   }
 
-  $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
-
-  @return join($pos, $full, comma);
+  $type: linear;
+  $gradient: compact($pos, $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
+  $type-gradient: append($type, $gradient, comma);
 
+  @return $type-gradient;
 }
+
diff --git a/app/assets/stylesheets/functions/_radial-gradient.scss b/app/assets/stylesheets/functions/_radial-gradient.scss
@@ -0,0 +1,15 @@
+// This function is required and used by the background-image mixin.
+@function radial-gradient($pos, $shape-size,
+                       $G1,        $G2,
+                       $G3: false, $G4: false,
+                       $G5: false, $G6: false,
+                       $G7: false, $G8: false,
+                       $G9: false, $G10: false) {
+
+  $type: radial;
+  $gradient: compact($pos, $shape-size, $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
+  $type-gradient: append($type, $gradient, comma);
+
+  @return $type-gradient;
+}
+