Skip to content

Instantly share code, notes, and snippets.

@Eworm

Eworm/Svg-or-not mixin for SASS

Last active December 17, 2015 21:59
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Eworm/5678716 to your computer and use it in GitHub Desktop.
Save Eworm/5678716 to your computer and use it in GitHub Desktop.
Download ZIP
A SASS mixin to use an svg sprite for retina screens or a regular (.png) sprite. Must be used together with the svg check from modernnizr (or some other check) to set an svg class on the html. Usage: @include svg-or-not('img/sprite'); You can choose your own directory and spritename, and you don't have to add an extension. The mixin will either …
Raw
Svg-or-not mixin for SASS
@mixin svg-or-not($image) {
background-repeat: no-repeat;
background-image: url($image + '.png');
.svg & {
/* On svg capable browsers, use an svg */
background-image: url($image + '.svg');
}
}
@Eworm
Copy link
Author

Eworm commented May 30, 2013

What are your thoughts?
Are browsers on retina screens always capable of svg? Or should there be another fallback? This ofcourse means someone building the site should make and maintain 3 sprites.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment