Inline SVG styles [SASS]

inline-svg.scss

$rating-small: 'small';
$rating-medium: 'medium';
$rating-large: 'large';

$windowsphone-fallback-small: 15px 15px;
$windowsphone-fallback-medium: 20px 20px;
$windowsphone-fallback-large: 25px 25px;

$given-parameter1: 'review';
$given-parameter2: 'shop';
$given-parameter3: 'default';

// set svg color
$star-color-orange: $blaze-orange !default;
$star-color-yellow: $fluorescent-orange !default;
$star-color-black: $shark !default;
$star-color-passive: $nobel !default;
$star-color-background: $white !default;

//set svg size of stars via height
$rating-height-small: rem-calc(15px) !default;
$rating-height-medium: rem-calc(20px) !default;
$rating-height-large: rem-calc(25px) !default;


// classes for modular extending
// different png color stars
.windowsphone-fallback-image-passive {
  background-image: url(rating-star-passive.png);
}

.windowsphone-fallback-image-default {
  background-image: url(rating-star-default.png);
}

.windowsphone-fallback-image-shop {
  background-image: url(rating-star-shop.png);
}

.windowsphone-fallback-image-review {
  background-image: url(rating-star-review.png);
}

// png size from given values
.windowsphone-fallback-small {
  background-size: $windowsphone-fallback-small;
}

.windowsphone-fallback-medium {
  background-size: $windowsphone-fallback-medium;
}

.windowsphone-fallback-large {
  background-size: $windowsphone-fallback-large;
}

// different color svgs
.given-parameter1 {
  background: inline-svg('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 50 50" xml:space="preserve"> <path fill="' + $star-color-orange + '" d="'+ $svg-d-path +'"/></svg>');
}

.given-parameter2 {
  background: inline-svg('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 50 50" xml:space="preserve"> <path fill="' + $star-color-yellow + '" d="'+ $svg-d-path +'"/></svg>');
}

.given-parameter3 {
  background: inline-svg('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 50 50" xml:space="preserve"> <path fill="' + $star-color-black + '" d="'+ $svg-d-path +'"/></svg>');
}

// svg size from given values
.svg-small {
  height: $rating-height-small;
}

.svg-medium {
  height: $rating-height-medium;
}

.svg-large {
  height: $rating-height-large;
}


// example call
 & .your-class--#{$given-parameter2} {
    @extend .given-parameter2;
    @extend .svg-small;

    @at-root .windowsphone & {
      @extend .windowsphone-fallback-image-shop;
      @extend .windowsphone-fallback-small;
    }
  }