IE7 doesn't support data-URIs. If you still support IE7 (it's not dead yet), spr...

ryankshaw · on Jan 9, 2012

you can use mhtml for ie7, see: http://documentcloud.github.com/jammit/#embedding and search for "mhtml" in http://www.nczonline.net/blog/2010/07/06/data-uris-make-css-...

as far as keeping it simple, the sass file that I would write would look like:

  .icon {
    height: 16px;
    width: 16px;
    display: inline-block;
  }
  .checkmark-icon {
    @extend .icon;
    background-image: inline-image('path/to/checkmark.png');
    &:hover { background-image: inline-image('path/to/checkmark-hover.png'); }
  }
  .error-icon {
    @extend .icon;
    background-image: inline-image('path/to/error.png');
    &:hover { background-image: inline-image('path/to/error-hover.png'); }
  }

so you'd never have to manually update the sass file if the image changes and then you can just do some magic to get it to work with ie7 with mhtml if you are going to support it.