Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.6)
// Compass (v1.0.1)
// ----

// SVG + Backup mixin
//
// This mixin assumes that your:
// SVG ID = SVG element class = svg backup image URL

$svgs : (
  logo : (
    svg-id : logo,
    color : red,
    height : 30px,
    width : 170px
  ),
  logo-white : (
    svg-id : logo,
    color : white,
    height : 30px,
    width : 170px
  )
);

$fallback-img: (
    logo: (
      position-x: 0px,
      position-y: -163px,
      width: 3px,
      height: 72px,
    ),
    logo-white: (
      position-x: 0px,
      position-y: -235px,
      width: 3px,
      height: 72px,
    )
);

//
// Helpers
// --------------------------------------------------

@function fallback-img($svg) {
  @return map-get($fallback-img, $svg);
}

@function svg-fallback-width($svg) {
  @return map-get(fallback-img($svg), width);
}

@function svg-fallback-height($svg) {
  @return map-get(fallback-img($svg), height);
}

@function svg-fallback-bg($svg) {
  @return map-get(fallback-img($svg), position-x) map-get(fallback-img($svg), position-y)
}

//
// Mixins
// --------------------------------------------------

@mixin sprite($img-name) {
  background-position: svg-fallback-bg($img-name);
  width: svg-fallback-width($img-name);
  height: svg-fallback-height($img-name);
}

@mixin fallback-img($img-name) {
  @at-root .no-svg &{
    @include sprite($img-name);
  }
}

//generate base SVG styles plus fallbacks
@each $svg, $svg-defs in $svgs {
  .#{$svg} {
    //these could be further abstracted
    height: map-get($svg-defs, height);
    width: map-get($svg-defs, width);
    color: map-get($svg-defs, color);
    
    @include fallback-img($svg);
  }
}

SassMeister-output.css

.logo {
  height: 30px;
  width: 170px;
  color: red;
}
.no-svg .logo {
  background-position: 0px -163px;
  width: 3px;
  height: 72px;
}

.logo-white {
  height: 30px;
  width: 170px;
  color: white;
}
.no-svg .logo-white {
  background-position: 0px -235px;
  width: 3px;
  height: 72px;
}