Permalink
Browse files

Refactored _background-image mixin. Fixes issues. Works with Sass 3.1.8.

  • Loading branch information...
1 parent fcb1a28 commit 4e6f6b0b9c54cd05f33ac114ec856bf30d100d8b Phil LaPier committed Oct 3, 2011
Showing with 10 additions and 30 deletions.
  1. +10 −30 app/assets/stylesheets/css3/_background-image.scss
@@ -13,8 +13,8 @@
$image-7, $image-8,
$image-9, $image-10);
- $assets: false;
- $gradients: false;
+ $assets: ();
+ $gradients: ();
$count: 0;
//Find all asset images in list
@@ -26,13 +26,7 @@
}
@else if $type == string {
- @if $assets == false {
- $assets: nth($images, $i);
- }
-
- @else {
- $assets: join($assets, nth($images, $i), comma);
- }
+ $assets: join($assets, nth($images, $i), comma);
}
}
@@ -41,23 +35,18 @@
$type: type-of(nth($images, $i));
@if $type == list {
- @if $gradients == false {
- $gradients: nth($images, $i);
- }
- @else {
- $gradients: $gradients, nth($images, $i);
- }
+ $gradients: append($gradients, nth($images, $i), comma);
}
}
+
@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;
@@ -72,11 +61,10 @@
background-image: render-gradients($gradients);
}
}
-
}
@function render-gradients($gradients, $vendor: false) {
- @if $count == 1 {
+ @if length($gradients) == 1 {
$vendor-gradients: false;
@if $vendor {
$vendor-gradients: -#{$vendor}-linear-gradient($gradients);
@@ -88,26 +76,19 @@
@return $vendor-gradients;
}
- @else if $count >= 2 {
- $vendor-gradients: false;
+ @else if length($gradients) >= 2 {
+ $vendor-gradients: ();
@for $i from 1 through length($gradients) {
@if $vendor {
- @if $vendor-gradients == false {
+ @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 {
- @if $vendor-gradients {
- $vendor-gradients: "linear-gradient(#{nth($gradients, $i)})";
- $vendor-gradients: unquote($vendor-gradients);
- }
- @else {
- $vendor-gradients: $vendor-gradients, "linear-gradient( #{nth($gradients, $i)} )";
- $vendor-gradients: unquote($vendor-gradients);
- }
+ $vendor-gradients: $vendor-gradients, unquote("linear-gradient(#{nth($gradients, $i)})");
}
}
@return $vendor-gradients;
@@ -117,4 +98,3 @@
//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%));
-

0 comments on commit 4e6f6b0

Please sign in to comment.