Skip to content

Instantly share code, notes, and snippets.

@hlb

hlb/_compass-retina-sprites.scss

Forked from estahn/_compass-retina-sprites.scss
Created January 11, 2013 12:31
Download ZIP

Revisions

  1. @estahn estahn revised this gist Nov 14, 2012. 1 changed file with 4 additions and 4 deletions.
    8 changes: 4 additions & 4 deletions _compass-retina-sprites.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -9,15 +9,15 @@

    .#{$base-class}-all-retina-sprites {
    background-image: sprite-url($map2x);
    @include background-size(ceil(image-width(sprite-path($map2x)) / 2) auto);
    }

    @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);
    }

    $position: sprite-position($map2x, $sprite);
    background-position: nth($position, 1) nth($position, 2) / 2;
    }
    }

  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);