bgimage.mixin.scss

// Not shown here is the Grunt task that takes source SVGs, creates PNGs (later optimised by imageoptim) and minified SVGs

@mixin bg-image($image, $size: 16px, $repeat: no-repeat, $position: center) {
  // SVG backgrounds with PNG fallback
  // All browsers that support multiple backgrounds also support SVGs. Woohoo!
  background-image: image-url("#{$image}.png");
  // inline-image requires Compass
  background-image: inline-image("#{$image}.min.svg"), none;

  background-size: $size;

  background-repeat: $repeat;

  background-position: $position;
}

// Usage:
.site__logo {
  @include bg-image("logo", 36px auto, no-repeat, left center);
}

/*
** Output:
**
** .site__logo {
**   background-image: url("logo.png");
**   background-image: url("data:image/svg+xml;base64, PHJLK...), none;
**   background-size: 36px auto;
**   background-repeat: no-repeat;
**   background-position: left center;
** }
*/