Sass retina image mixin
A tidy little mixin for swapping low-res and retina images in css.
Adapted from http://chrisltd.com/blog/2013/05/retina-images-sass/
Mixin
@mixin retina-image($context, $file, $type, $width, $height) {
background-image: url((asset-path($context + '/' + $file + '.' + $type)));
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (-moz-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx){
& {
background-image: url((asset-path($context + '/' + $file + '@2x.' + $type)));
-webkit-background-size: $width $height;
-moz-background-size: $width $height;
-o-background-size: $width $height;
background-size: $width $height;
}
}
}
Variable definitions
$context: The name of the sub-folder inside assets/images directory
$context + '/' can be removed if you don't have image sub directories
$file: Filename without extension
$type: extension (png, jpg, etc..)
$width, $height: pixel width/height of the normal image (not the 2x version)
Usage
@include retina-image(home, logo, png, 143px, 40px);
Written by Scott Greenwald
Related protips
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Css
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#