Skip to content

Instantly share code, notes, and snippets.

@Anderson-Juhasc
Created August 3, 2012 02:31
Show Gist options
  • Save Anderson-Juhasc/3243705 to your computer and use it in GitHub Desktop.
Save Anderson-Juhasc/3243705 to your computer and use it in GitHub Desktop.
Compass 0.12 retina mixins
// https://gist.github.com/gists/2879137
// this is for Compass 0.12
/* put this file in your assets/stylesheets/ folder
*
* Example main.scss:
* @import "compass";
* @import "icons/*.png";
* @include all-icons-sprites;
*
* @import "retina";
* 1. if all the images in your icons/ folder are retina size:
* @include retina-sprites($icons-sprites);
*
* 2. if only some of the images are retina size and they have a filename convention ex. x2-a.png, x2-b.png, x2-c.png
* @include retina-sprites($icons-sprites, sprite-names(sprite-map("icons/x2-*.png")));
*
* 3. otherwise you can manually list each retina image
* @include retina-sprites($icons-sprites, a b c);
*
* @import "lib";
* @import "base";
* ...
*
* Example equivalent of making background-position-x: 100%;
* .icons-x2-accordion-arrow {
* @include retina-background-position($icons-sprites, x2-accordion-arrow, 100%);
* }
*/
// helper function to return dimensions of sprite map for use with retina sprites
@function retina-dimensions($map) {
$path: sprite-path($map);
@return image-width($path)/2 image-height($path)/2;
}
// retina version of http://compass-style.org/reference/compass/helpers/sprites/#sprite-position
@function retina-position($map, $sprite, $offset-x: 0, $offset-y: 0) {
$sprite-pos: sprite-position($map, $sprite);
$x: nth($sprite-pos, 1);
$y: nth($sprite-pos, 2);
// emulate sprite-background-position()
$retina-x: $offset-x;
$retina-y: $offset-y;
@if unit($offset-x) != "%" {
$retina-x: $x/2 + $offset-x;
}
@if unit($offset-y) != "%" {
$retina-y: $y/2 + $offset-y;
}
@return $retina-x $retina-y;
}
// retina version of http://compass-style.org/reference/compass/helpers/sprites/#sprite
@function retina-sprite($map, $sprite, $offset-x: 0, $offset-y: 0) {
@return $map retina-position($map, $sprite, $offset-x, $offset-y);
}
// retina version of http://compass-style.org/reference/compass/utilities/sprites/base/#mixin-sprite-background-position
@mixin retina-background-position($map, $sprite, $offset-x: 0, $offset-y: 0) {
background-position: retina-position($map, $sprite, $offset-x, $offset-y);
}
// adds the appropriate background-position and background-size styles to retina-ize sprites
// usage example: @include retina-sprites($icons-sprites);
// usage example: @include retina-sprites($icons-sprites, icon1 icon2 icon3);
@mixin retina-sprites($map, $sprites: sprite-names($map)) {
$sprite-classes: ();
// calculate width and height of sprite map
@each $sprite in $sprites {
$sprite-classes: join($sprite-classes, #{"."}sprite-map-name($map)-$sprite, comma);
// adjust sprite's background position
.#{sprite-map-name($map)-$sprite} {
@include retina-background-position($map, $sprite);
}
}
#{$sprite-classes} {
@include background-size(retina-dimensions($map));
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment