Skip to content

Instantly share code, notes, and snippets.

@zethussuen
Last active December 16, 2015 06:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save zethussuen/5389206 to your computer and use it in GitHub Desktop.
Save zethussuen/5389206 to your computer and use it in GitHub Desktop.
SASS mixin for retina background-images in Ruby on Rails environments
// Original Source: https://gist.github.com/twe4ked
// Modified for assets pipelining on Ruby on Rails
// Added more options to pass
@mixin background-image-retina($file, $type, $width, $height, $positionX: left, $positionY: top, $background-repeat: no-repeat) {
background-image: image-url($file + '.' + $type);
background-size: $width $height;
width: $width; height: $height;
background-position: $positionX $positionY;
background-repeat: $background-repeat;
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 144dpi) {
& {
background-image: image-url($file + '@2x.' + $type);
background-size: $width*2 $height*2;
width: $width*2; height: $height*2;
}
}
}
// USAGE //
// example.scss //
.some-block {
@include background-image-retina('logo', 'png', 160px, 40px, right, top, repeat-x);
}
// output.css //
.some-block {
background-image: url(/assets/logo.png);
background-size: 160px 40px;
width: 160px;
height: 40px;
background-position: right top;
background-repeat: repeat-x;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 144dpi) {
.some-block {
background-image: url("/assets/logo@2x.png");
background-size: 320px 80px;
width: 320px;
height: 80px;
}
}
@reidelliott
Copy link

Great work!

@reidelliott
Copy link

In rails, this doesn't need to have an underscore in front of the file name? Also, where should it be included/imported? I appreciate the help.

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