-
-
Save Anderson-Juhasc/3243275 to your computer and use it in GitHub Desktop.
Compass/SASS sprites for different density displays
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import "_mixins.scss"; | |
| @mixin app($dpi) { | |
| header { | |
| position: relative; | |
| header .logo { | |
| // Center in header | |
| @include sprt-box-centered($dpi, logo); | |
| } | |
| } | |
| button .icon.icon-name { | |
| @include sprt-box($dpi, icon-name); | |
| } | |
| .separator { | |
| height: 1px; | |
| width: 100%; | |
| @include sprt($dpi, separator); | |
| background-repeat: repeat-x; | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import "compass/utilities/sprites/base"; | |
| // Using Android way of naming densities | |
| // (@x1.5 or @x2 doesn't look good for directory names in URLs) | |
| // | |
| // mdpi corresponds to normal density (device pixel ratio == 1; ~160dpi) | |
| // hdpi corresponds to high density (device pixel ratio == 1.5; ~240dpi) | |
| // xhdpi corresponds to extra-high density (Retina) (device pixel ratio == 2; ~320dpi) | |
| // | |
| // directory structure under <image-path>: | |
| // sprites/ | |
| // mdpi/ | |
| // icon-1.png | |
| // icon-2.png | |
| // hdpi/ | |
| // icon-1.png | |
| // icon-2.png | |
| // xhdpi/ | |
| // icon-1.png | |
| // icon-2.png | |
| // | |
| // However below only mdpi and xhdpi images are used | |
| // due to Compass issue #690 (see below) | |
| $mdpi-sprites: sprite-map("sprites/mdpi/*.png"); | |
| //$hdpi-sprites: sprite-map("sprites/hdpi/*.png"); | |
| $xhdpi-sprites: sprite-map("sprites/xhdpi/*.png"); | |
| @mixin sprite-bg-size { | |
| // Need to hardcode sprite map dimensions | |
| // as there's no way to get it programmatically | |
| background-size: 500px 808px; | |
| } | |
| // see https://github.com/chriseppstein/compass/issues/690 | |
| // No good way to find sprite position when it is hdpi, | |
| // i.e. device pixel ratio is 1.5 | |
| @mixin _sprite-position($map, $name) { | |
| @if (sprite-position($mdpi-sprites, $name) != sprite-position($map, $name)) { | |
| $xpos: round(nth(sprite-position($map, $name), 1) / 2); | |
| $ypos: round(nth(sprite-position($map, $name), 2) / 2); | |
| background-position: $xpos $ypos; | |
| } | |
| @else { | |
| background-position: sprite-position($map, $name); | |
| } | |
| } | |
| // Sets background image | |
| @mixin sprt($dpi, $name) { | |
| @if $dpi == mdpi { | |
| background-image: $mdpi-sprites; | |
| @include _sprite-position($mdpi-sprites, $name); | |
| } | |
| @else if $dpi == hdpi { | |
| background-image: $hdpi-sprites; | |
| @include _sprite-position($hdpi-sprites, $name); | |
| } | |
| @else if $dpi == xhdpi { | |
| background-image: $xhdpi-sprites; | |
| @include _sprite-position($xhdpi-sprites, $name); | |
| } | |
| @include sprite-bg-size; | |
| } | |
| // Set background image and dimensions | |
| @mixin sprt-box($dpi, $name) { | |
| @include sprt($dpi, $name); | |
| width: image-width(sprite-file($mdpi-sprites, $name)); | |
| height: image-height(sprite-file($mdpi-sprites, $name)); | |
| } | |
| // Set background image, dimensions and centers element in parent | |
| // Parent needs to have position: relative or position: absolute | |
| @mixin sprt-box-centered($dpi, $name) { | |
| @include sprt-box($dpi, $name); | |
| $h: image-height(sprite-file($mdpi-sprites, $name)); | |
| $w: image-width(sprite-file($mdpi-sprites, $name)); | |
| position: absolute; | |
| left: 50%; | |
| margin-left: -$w/2; | |
| top: 50%; | |
| margin-top: -$h/2; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <link href="/stylesheets/mdpi.css" type="text/css" rel="stylesheet"> | |
| <!-- Also serve higher quality images for hdpi devices so that images are scaled down rather than up --> | |
| <link href="/stylesheets/xhdpi.css" type="text/css" rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5)"> | |
| </head> | |
| <body> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import "_app.scss"; | |
| @include app(mdpi); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import "_app.scss"; | |
| @include app(xhdpi); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment