mjj2000/_datauri-bg.scss

## _datauri-bg.scss
/*
A scss mixin that convert background images from original URL path to DataURI with IE6-8 fallback.

 - Based on `compass/css3/images`
 - Support 1-10 background image(s) as arguments of `background-image` in compass.
 - Use class `lt-ie9` in `<html>` tag as `html5-boilerplate` to determine if current browser is IE6-8 or not.
 - Image created by `linear-gradient` will be skipped.

# Example

  @import "datauri-bg";

  div {
    @include datauri-bg("sample.png"); // single background
    @include datauri-bg("sample1.png", "sample2.png", "sample3.png"); // multiple backgrounds
  }

*/
@import "compass/css3/images";

// A mixin to generate style for Data-Uri background image
// $image: file path of background image
@mixin datauri-bg(
  $image-1,
  $image-2: false,
  $image-3: false,
  $image-4: false,
  $image-5: false,
  $image-6: false,
  $image-7: false,
  $image-8: false,
  $image-9: false,
  $image-10: false
) {
  $images: compact($image-1, $image-2, $image-3, $image-4, $image-5, $image-6, $image-7, $image-8, $image-9, $image-10);
  $image_inline_list: ();
  $image_fallback_list: ();
  @each $image in $images {
    $image_inline: $image;
    $image_fallback: $image;
    @if (type-of($image) == "string") {
      $image_inline: inline-image($image);
      $image_fallback: image_url($image);
    }
    $image_inline_list: append(
      $image_inline_list,
      $image_inline,
      'comma'
    );
    $image_fallback_list: append(
      $image_fallback_list,
      $image_fallback,
      'comma'
    );
  }
  @include background-image($image_inline_list);
  .lt-ie9 & {
    // older than IE9? => fallback to original image path
    @include background-image($image_fallback_list);
  }
}
	/*
	A scss mixin that convert background images from original URL path to DataURI with IE6-8 fallback.

	- Based on `compass/css3/images`
	- Support 1-10 background image(s) as arguments of `background-image` in compass.
	- Use class `lt-ie9` in `<html>` tag as `html5-boilerplate` to determine if current browser is IE6-8 or not.
	- Image created by `linear-gradient` will be skipped.

	# Example

	@import "datauri-bg";

	div {
	@include datauri-bg("sample.png"); // single background
	@include datauri-bg("sample1.png", "sample2.png", "sample3.png"); // multiple backgrounds
	}

	*/
	@import "compass/css3/images";

	// A mixin to generate style for Data-Uri background image
	// $image: file path of background image
	@mixin datauri-bg(
	$image-1,
	$image-2: false,
	$image-3: false,
	$image-4: false,
	$image-5: false,
	$image-6: false,
	$image-7: false,
	$image-8: false,
	$image-9: false,
	$image-10: false
	) {
	$images: compact($image-1, $image-2, $image-3, $image-4, $image-5, $image-6, $image-7, $image-8, $image-9, $image-10);
	$image_inline_list: ();
	$image_fallback_list: ();
	@each $image in $images {
	$image_inline: $image;
	$image_fallback: $image;
	@if (type-of($image) == "string") {
	$image_inline: inline-image($image);
	$image_fallback: image_url($image);
	}
	$image_inline_list: append(
	$image_inline_list,
	$image_inline,
	'comma'
	);
	$image_fallback_list: append(
	$image_fallback_list,
	$image_fallback,
	'comma'
	);
	}
	@include background-image($image_inline_list);
	.lt-ie9 & {
	// older than IE9? => fallback to original image path
	@include background-image($image_fallback_list);
	}
	}