Skip to content

Instantly share code, notes, and snippets.

@zemd

zemd/compass-retina-sprites.scss

Forked from thulstrup/compass-retina-sprites.scss
Created November 3, 2013 15:35
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save zemd/7291501 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save zemd/7291501 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @thulstrup thulstrup revised this gist Mar 20, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion compass-retina-sprites.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -14,7 +14,7 @@ $sprites-retina: sprite-map("sprites-retina/*.png");
    $ypos: round(nth(sprite-position($sprites-retina, $name), 2) / 2);
    background-position: 0 $ypos;
    }
    // I was unable to get the width of the sprites image, so I had to hard code it.
    // Hard coded width of the normal sprite image. There must be a smarter way to do this.
    @include background-size(444px auto);
    background-image: sprite-url($sprites-retina);
    }
  2. @thulstrup thulstrup revised this gist Mar 20, 2012. 1 changed file with 0 additions and 1 deletion.
    1 change: 0 additions & 1 deletion compass-retina-sprites.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -14,7 +14,6 @@ $sprites-retina: sprite-map("sprites-retina/*.png");
    $ypos: round(nth(sprite-position($sprites-retina, $name), 2) / 2);
    background-position: 0 $ypos;
    }
    $sprites-url: sprite-url($sprites);
    // I was unable to get the width of the sprites image, so I had to hard code it.
    @include background-size(444px auto);
    background-image: sprite-url($sprites-retina);
  3. @thulstrup thulstrup revised this gist Mar 20, 2012. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions compass-retina-sprites.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -9,6 +9,7 @@ $sprites-retina: sprite-map("sprites-retina/*.png");
    height: image-height(sprite-file($sprites, $name));
    width: image-width(sprite-file($sprites, $name));
    @media (-webkit-min-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 2) {
    // Workaround for https://gist.github.com/2140082
    @if (sprite-position($sprites, $name) != sprite-position($sprites-retina, $name)) {
    $ypos: round(nth(sprite-position($sprites-retina, $name), 2) / 2);
    background-position: 0 $ypos;
  4. @thulstrup thulstrup created this gist Mar 20, 2012.
    26 changes: 26 additions & 0 deletions compass-retina-sprites.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,26 @@
    $sprites: sprite-map("sprites/*.png");
    $sprites-retina: sprite-map("sprites-retina/*.png");

    @mixin sprite-background($name) {
    background-image: sprite-url($sprites);
    background-position: sprite-position($sprites, $name);
    background-repeat: no-repeat;
    display: block;
    height: image-height(sprite-file($sprites, $name));
    width: image-width(sprite-file($sprites, $name));
    @media (-webkit-min-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 2) {
    @if (sprite-position($sprites, $name) != sprite-position($sprites-retina, $name)) {
    $ypos: round(nth(sprite-position($sprites-retina, $name), 2) / 2);
    background-position: 0 $ypos;
    }
    $sprites-url: sprite-url($sprites);
    // I was unable to get the width of the sprites image, so I had to hard code it.
    @include background-size(444px auto);
    background-image: sprite-url($sprites-retina);
    }
    }

    // Usage.
    .mail-icon {
    @include sprite-background(mail);
    }