Skip to content

Instantly share code, notes, and snippets.

@B-iggy
Created September 17, 2015 19:53
Show Gist options
  • Save B-iggy/97dccff0f4b42acf1eb4 to your computer and use it in GitHub Desktop.
Save B-iggy/97dccff0f4b42acf1eb4 to your computer and use it in GitHub Desktop.
Inline SVG styles [SASS]
$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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment