Skip to content

Instantly share code, notes, and snippets.

@kaelig
Created November 28, 2012 11:10
Show Gist options
  • Save kaelig/4160546 to your computer and use it in GitHub Desktop.
Save kaelig/4160546 to your computer and use it in GitHub Desktop.
HiDPI sprites with Compass
/*! HiDPI v1 | MIT License | git.io/hidpi */
$hidpi-debug: false !default;
@import 'compass/css3';
@mixin hidpi-abstract($image, $extension) {
$image-fullname: '#{$image}.#{$extension}';
$image-hidpi-fullname: '#{$image}_x2.#{$extension}';
background-image: image-url($image-hidpi-fullname);
@include background-size(
image-width($image-fullname)
image-height($image-fullname)
);
}
@mixin hidpi($image: false, $extension: png) {
@if $hidpi-debug {
@if $image {
@include hidpi-abstract($image, $extension);
} @else {
@content;
}
} @else {
@if $image {
background-image: image-url('#{$image}.#{$extension}');
}
@media (-webkit-min-device-pixel-ratio: 1.3),
(-o-min-device-pixel-ratio: 2.6/2),
(min--moz-device-pixel-ratio: 1.3),
(min-device-pixel-ratio: 1.3),
(min-resolution: 1.3dppx) {
@if $image {
@include hidpi-abstract($image, $extension);
} @else {
@content;
}
}
}
}
/*! HiDPI v1 | MIT License | git.io/hidpi */
$hidpi-debug: false !default;
@import 'compass/css3';
@mixin hidpi-abstract($image, $extension) {
$image-fullname: '#{$image}.#{$extension}';
$image-hidpi-fullname: '#{$image}_x2.#{$extension}';
background-image: image-url($image-hidpi-fullname);
@include background-size(
image-width($image-fullname)
image-height($image-fullname)
);
}
@mixin hidpi($image: false, $extension: png) {
@if $hidpi-debug {
@if $image {
@include hidpi-abstract($image, $extension);
} @else {
@content;
}
} @else {
@if $image {
background-image: image-url('#{$image}.#{$extension}');
}
@media (-webkit-min-device-pixel-ratio: 1.3),
(-o-min-device-pixel-ratio: 2.6/2),
(min--moz-device-pixel-ratio: 1.3),
(min-device-pixel-ratio: 1.3),
(min-resolution: 1.3dppx) {
@if $image {
@include hidpi-abstract($image, $extension);
} @else {
@content;
}
}
}
}
@import "compass/utilities/sprites/base",
"compass/css3/background-size",
"hidpi"; // git.io/hidpi
@import "icons/*.png";
@import "icons_x2/*.png";
.icons-sprite {
@include hidpi {
$icons-sprites-width: image-width(sprite-path($icons-sprites));
@include background-size($icons-sprites-width auto);
background-image: sprite-url($icons_x2-sprites);
}
}
@include all-icons-sprites;
/* HiDPI v1 | MIT License | git.io/hidpi */
.icons-sprite, .icons-arabic-brand, .icons-hausa-brand {
background: url('/images/icons-s40deffd3eb.png') no-repeat;
}
.icons_x2-sprite {
background: url('/images/icons_x2-sb6eb53dcf4.png') no-repeat;
}
@media (-webkit-min-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (min--moz-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
.icons-sprite, .icons-arabic-brand, .icons-hausa-brand {
-webkit-background-size: 102px auto;
-moz-background-size: 102px auto;
-o-background-size: 102px auto;
background-size: 102px auto;
background-image: url('/images/icons_x2-sb6eb53dcf4.png');
}
}
.icons-arabic-brand {
background-position: 0 -23px;
}
.icons-hausa-brand {
background-position: 0 0;
}
@import "compass/utilities/sprites/base",
"compass/css3/background-size",
"hidpi"; // git.io/hidpi
@import "icons/*.png";
@import "icons_x2/*.png";
.icons-sprite {
@include hidpi {
$icons-sprites-width: image-width(sprite-path($icons-sprites));
@include background-size($icons-sprites-width auto);
background-image: sprite-url($icons_x2-sprites);
}
}
@include all-icons-sprites;
/* HiDPI v1 | MIT License | git.io/hidpi */
.icons-sprite, .icons-arabic-brand, .icons-hausa-brand {
background: url('/images/icons-s40deffd3eb.png') no-repeat;
}
.icons_x2-sprite {
background: url('/images/icons_x2-sb6eb53dcf4.png') no-repeat;
}
@media (-webkit-min-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (min--moz-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
.icons-sprite, .icons-arabic-brand, .icons-hausa-brand {
-webkit-background-size: 102px auto;
-moz-background-size: 102px auto;
-o-background-size: 102px auto;
background-size: 102px auto;
background-image: url('/images/icons_x2-sb6eb53dcf4.png');
}
}
.icons-arabic-brand {
background-position: 0 -23px;
}
.icons-hausa-brand {
background-position: 0 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment