Skip to content

Instantly share code, notes, and snippets.

@dannykeane

dannykeane/result.css

Created February 11, 2013 10:39
Show Gist options
  • Save dannykeane/4753754 to your computer and use it in GitHub Desktop.
Save dannykeane/4753754 to your computer and use it in GitHub Desktop.
Download ZIP
Retina Sass (SCSS) mixin
Raw
result.css
#element{
background-image:url("icon.png");
background-repeat: no-repeat;
background-position: 0 -10px;
}
@media print, screen,
(-webkit-min-device-pixel-ratio: 1.25),
(~`"-o-min-device-pixel-ratio: 1.25/1"`),
(min--moz-device-pixel-ratio: 1.25),
(-moz-min-device-pixel-ratio: 1.25),
(-ms-min-device-pixel-ratio: 1.25),
(min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi),
(min-resolution: 1.25dppx){
#element{
background-size:30px 30px;
background-image:url("icon@2x.png");
background-position: 0 -20px;
}
}
Raw
retina.scss
@mixin retina-image($file, $type, $repeat, $width, $height, $posx, $posy) {
background-image: url($file + '.' + $type);
background-repeat: $repeat;
background-position: $posx $posy;
@media print, screen,
(-webkit-min-device-pixel-ratio: 1.25),
(~`"-o-min-device-pixel-ratio: 1.25/1"`),
(min--moz-device-pixel-ratio: 1.25),
(-moz-min-device-pixel-ratio: 1.25),
(-ms-min-device-pixel-ratio: 1.25),
(min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi),
(min-resolution: 1.25dppx) {
background-size: $width $height;
background-image: url($file + '@2x.' + $type);
background-position: $posx * 2 $posy * 2;
}
}
// Example
#element {
@include retina-image('icon', 'png', 'no-repeat', '30px', '30px', '0' '-10px');
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment