Skip to content

Instantly share code, notes, and snippets.

@VictorGarcia

VictorGarcia/_compass-retina-sprites.scss

Forked from estahn/_compass-retina-sprites.scss
Created October 28, 2012 08:45
Download ZIP

Revisions

  1. VictorGarcia revised this gist Oct 28, 2012. 1 changed file with 8 additions and 1 deletion.
    9 changes: 8 additions & 1 deletion _compass-retina-sprites.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -14,7 +14,14 @@
    @each $sprite in sprite-names($map) {
    .#{$base-class}-#{$sprite} {
    @extend .#{$base-class}-all-retina-sprites;
    @include sprite($map2x, $sprite);

    @if (sprite-position($map, $sprite) != sprite-position($map2x, $sprite)) {
    $ypos: round(nth(sprite-position($map2x, $sprite), 2) / 2);
    background-position: 0 $ypos;
    } @else {
    @include sprite($map2x, $sprite);
    }

    @if (image-width(sprite-file($map, $sprite)) != image-width(sprite-file($map2x, $sprite))) {
    @include background-size(image-width(sprite-file($map, $sprite)) auto);
    }
  2. @estahn estahn revised this gist Oct 5, 2012. 1 changed file with 11 additions and 10 deletions.
    21 changes: 11 additions & 10 deletions _compass-retina-sprites.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -1,24 +1,25 @@
    @mixin all-retina-sprites($map, $map2x) {
    @media
    (min--moz-device-pixel-ratio: 1.5),
    @media (min--moz-device-pixel-ratio: 1.5),
    (-o-min-device-pixel-ratio: 3/2),
    (-webkit-min-device-pixel-ratio: 1.5),
    (min-device-pixel-ratio: 1.5),
    (min-resolution: 1.5dppx) {

    $base-class: sprite-map-name($map);
    $base-class: sprite-map-name($map);

    .#{$base-class}-all-retina-sprites {
    background-image: sprite-url($map2x);
    }
    .#{$base-class}-all-retina-sprites {
    background-image: sprite-url($map2x);
    }

    @each $sprite in sprite-names($map) {
    .#{$base-class}-#{$sprite} {
    @extend .#{$base-class}-all-retina-sprites;
    @include sprite($map2x, $sprite);
    @each $sprite in sprite-names($map) {
    .#{$base-class}-#{$sprite} {
    @extend .#{$base-class}-all-retina-sprites;
    @include sprite($map2x, $sprite);
    @if (image-width(sprite-file($map, $sprite)) != image-width(sprite-file($map2x, $sprite))) {
    @include background-size(image-width(sprite-file($map, $sprite)) auto);
    }
    }
    }

    }
    }
  3. @estahn estahn created this gist Oct 5, 2012.
    24 changes: 24 additions & 0 deletions _compass-retina-sprites.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,24 @@
    @mixin all-retina-sprites($map, $map2x) {
    @media
    (min--moz-device-pixel-ratio: 1.5),
    (-o-min-device-pixel-ratio: 3/2),
    (-webkit-min-device-pixel-ratio: 1.5),
    (min-device-pixel-ratio: 1.5),
    (min-resolution: 1.5dppx) {

    $base-class: sprite-map-name($map);

    .#{$base-class}-all-retina-sprites {
    background-image: sprite-url($map2x);
    }

    @each $sprite in sprite-names($map) {
    .#{$base-class}-#{$sprite} {
    @extend .#{$base-class}-all-retina-sprites;
    @include sprite($map2x, $sprite);
    @include background-size(image-width(sprite-file($map, $sprite)) auto);
    }
    }

    }
    }
    14 changes: 14 additions & 0 deletions _sprites.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,14 @@
    // Sprite set: General
    // ----------------------------------------
    //$general-layout: smart;
    $general-spacing: 1px;
    $general-sprite-dimensions: true;
    @import "general/*.png";
    @include all-general-sprites;

    $general-retina-spacing: 1px;
    $general-retina-sprite-dimensions: true;
    @import "general-retina/*.png";
    //@include all-general-retina-sprites;

    @include all-retina-sprites($general-sprites, $general-retina-sprites);