Skip to content

Instantly share code, notes, and snippets.

@arthurgouveia
Last active August 29, 2015 14:11
Show Gist options
  • Save arthurgouveia/fef6e127a479cfe3ef83 to your computer and use it in GitHub Desktop.
Save arthurgouveia/fef6e127a479cfe3ef83 to your computer and use it in GitHub Desktop.
Sass & Compass sprites for standard and HD displays
// Sprite mappers
$sprite: sprite-map('sprite/standard/*.png', $layout: 'smart');
$sprite-hd: sprite-map('sprite/hd/*.png', $layout: 'smart');
// HD media query
$hd: 'print, (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi)';
// HD mixin sprite
// Your HD files should necessarily be twice the size of the standard ones
@mixin hd-sprite {
@media #{$hd} {
background-image: $sprite-hd;
background-size: image-width(sprite-path($sprite-hd))/2 image-height(sprite-path($sprite-hd))/2;
}
}
// Usage
.some-logo {
@include sprite($sprite, some-logo, true);
@include hide-text(left);
background-image: $sprite;
@include hd-sprite;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment