Skip to content

Instantly share code, notes, and snippets.

@lukasborawski
Last active January 3, 2016 08:09
Show Gist options
  • Save lukasborawski/8433951 to your computer and use it in GitHub Desktop.
Save lukasborawski/8433951 to your computer and use it in GitHub Desktop.
Background sprite with retina ready SASS @mixin - http://sassmeister.com/gist/8433951.
$global-sprite-name: 'global_sprite';
$global-sprite-type: "png";
$global-sprite-size: 600px 600px;
@mixin bg-sprite($x: 0, $y: 0, $retina: false) {
$file-type: $global-sprite-type;
background: url('../images/' + $global-sprite-name + '.' + $file-type) $x $y no-repeat;
background-size: 600px 600px;
@if $retina == true {
@media
(min--moz-device-pixel-ratio: 1.3),
(-o-min-device-pixel-ratio: 2.6/2),
(-webkit-min-device-pixel-ratio: 1.3),
(min-device-pixel-ratio: 1.3),
(min-resolution: 1.3dppx) {
background: url('../images/' + $global-sprite-name + '@2x' + '.' + $file-type) $x $y no-repeat;
}
}
}
.block {
@include bg-sprite(-158px, -32px, true);
width: 30px; height: 30px;
}
.block {
background: url("../images/global_sprite.png") -158px -32px no-repeat;
background-size: 600px 600px;
width: 30px;
height: 30px;
}
@media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
.block {
background: url("../images/global_sprite@2x.png") -158px -32px no-repeat;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment