An scss mixin that convert background images from original URL path to DataURI

Introduction

This mixin will only replace value of property background-image fro original URL path to DataURI.

  • Based on compass/css3/images

  • Support 1-10 background image(s) as arguments of background-image in compass.

    datauri-bg($image-1, [$image-2],…, [$image-10]);

  • 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

1
2
3
4
5
6
@import "datauri-bg";

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

Source code