Last active
December 21, 2015 16:38
-
-
Save mjj2000/6334583 to your computer and use it in GitHub Desktop.
A scss mixin that convert background images from original URL path to DataURI with IE6-8 fallback.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
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); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment