An ScSS image extension replace mixin designed to serve PNG files to IE8, and SVG to all other browsers

image-extension-replacement.scss

// *************************** //
// IMAGE EXTENSION REPLACEMENT //
// *************************** //
// Use: @include image-background($image: "../lib/img/", $repeat: no-repeat, $position: center center);

@mixin image-background($color: transparent,$image: none,$repeat: no-repeat,$attachment: scroll,$position: center center) {
  
  // Add extension to $image
  $image: '#{$image}.#{$imageextension}';
  
  // Output the $imageextension
  background: $color url($image) $repeat $attachment $position;
  
}

This mixin is to be used with something like @malarkey's Rock Hammer when dealing with background-images in ScSS.

The aim was to serve SVG images in background images to all browsers except IE8.

Before you call to _mixins.scss in your styles.scss file, simply specify $imageextension: "svg";

// Sass mixins
$imageextension: "svg";
@import "partials/mixins";

I have a lte-ie8.scss config file that pulls most things that styles.scss imports, and the exception is that $imageextension: "png"; before importing _mixins.scss

// Sass mixins
$imageextension: "png";
@import "partials/mixins";

Any questions, let me know - happy to help! And if you can think of an easier / leaner way to do this, shout out :)

In case you're curious, I'm using @benhowdle89's SVGeezy to deal within images within HTML and reverting to PNGs in IE8. Those PNGs are auto generated based on SVGs during the build process.

Update

So it looks like this isn't quite working the way I wanted it to.. cracking on with a fix now, will update shortly! :)

Can do do this as a pull request, based on the IE8 opacity method I've put in?

Cheers