Last active
December 17, 2015 21:59
-
-
Save Eworm/5678716 to your computer and use it in GitHub Desktop.
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 …
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @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'); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.