This gist demonstrates how to use Compass magic sprites in combination with HiDPI.
Credits: Images ©BBC News.
This gist demonstrates how to use Compass magic sprites in combination with HiDPI.
Credits: Images ©BBC News.
/*! 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; | |
} |