Skip to content

Instantly share code, notes, and snippets.

@goeko

goeko/compass-retina-sprites.scss

Forked from starstuck/compass-retina-sprites.scss
Created May 4, 2013 20:38
Show Gist options
  • Save goeko/5518659 to your computer and use it in GitHub Desktop.
Save goeko/5518659 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @starstuck starstuck revised this gist Aug 13, 2012. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions compass-retina-sprites.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -15,8 +15,6 @@

    @mixin retina-sprite-item($sprite, $sprite-2x, $name) {
    background-position: sprite-position($sprite, $name);
    background-repeat: no-repeat;
    display: block;
    height: image-height(sprite-file($sprite, $name));
    width: image-width(sprite-file($sprite, $name));

    @@ -38,6 +36,8 @@

    #{prefix-each($all-items, ".#{$prefix}-")} {
    background-image: sprite-url($map);
    background-repeat: no-repeat;
    display: block;
    @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5) {
    background-image: sprite-url($map-2x);
    @include background-size(ceil(image-width(sprite-path($map-2x)) / 2), auto);
  2. @starstuck starstuck revised this gist Aug 7, 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
    @@ -1,5 +1,5 @@
    /**
    * Setup icons sprite
    * Setup images sprite having high resolution variant for retina displays.
    *
    * It will create class names for all available icons.
    *
  3. @starstuck starstuck revised this gist Aug 7, 2012. 1 changed file with 30 additions and 21 deletions.
    51 changes: 30 additions & 21 deletions compass-retina-sprites.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -13,34 +13,43 @@
    * end
    */

    $icons: sprite-map("icons/*.png", $spacing: 5px);
    $icons-2x: sprite-map("icons-2x/*.png", $spacing: 10px);
    $all-icons: sprite-names($icons);

    @mixin sprite-background($name) {
    background-position: sprite-position($icons, $name);
    @mixin retina-sprite-item($sprite, $sprite-2x, $name) {
    background-position: sprite-position($sprite, $name);
    background-repeat: no-repeat;
    display: block;
    height: image-height(sprite-file($icons, $name));
    width: image-width(sprite-file($icons, $name));
    @if (sprite-position($icons, $name) != sprite-position($icons-2x, $name)) {
    height: image-height(sprite-file($sprite, $name));
    width: image-width(sprite-file($sprite, $name));

    // Workaround for https://gist.github.com/2140082
    @if (sprite-position($sprite, $name) != sprite-position($sprite-2x, $name)) {
    @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5) {
    $ypos: round(nth(sprite-position($icons-2x, $name), 2) / 2);
    background-position: 0 $ypos;
    background-position: 0 round(nth(sprite-position($sprite-2x, $name), 2) / 2);
    height: round(image-height(sprite-file($sprite-2x, $name)) / 2);
    width: round(image-width(sprite-file($sprite-2x, $name)) /2 );
    }
    }
    }

    #{prefix-each($all-icons, ".icon-")} {
    background-image: sprite-url($icons);
    @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5) {
    background-image: sprite-url($icons-2x);
    @include background-size(ceil(image-width(sprite-path($icons-2x)) / 2), auto);

    @mixin retina-sprite($glob, $glob-2x, $prefix) {
    $map: sprite-map($glob, $spacing: 1px);
    $map-2x: sprite-map($glob-2x, $spacing: 2px);
    $all-items: sprite-names($map);

    #{prefix-each($all-items, ".#{$prefix}-")} {
    background-image: sprite-url($map);
    @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5) {
    background-image: sprite-url($map-2x);
    @include background-size(ceil(image-width(sprite-path($map-2x)) / 2), auto);
    }
    }
    }

    @each $name in $all-icons{
    .icon-#{$name} {
    @include sprite-background(#{$name});
    @each $name in $all-items{
    .#{$prefix}-#{$name} {
    @include retina-sprite-item($map, $map-2x, #{$name});
    }
    }
    }
    }


    @include retina-sprite("icons/*.png", "icons-2x/*.png", "icon");
  4. @starstuck starstuck revised this gist Aug 3, 2012. 1 changed file with 2 additions and 5 deletions.
    7 changes: 2 additions & 5 deletions compass-retina-sprites.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -13,11 +13,8 @@
    * end
    */

    $icons-spacing: 10px;
    $icons-2x-spacing: 20px;

    $icons: sprite-map("icons/*.png");
    $icons-2x: sprite-map("icons-2x/*.png");
    $icons: sprite-map("icons/*.png", $spacing: 5px);
    $icons-2x: sprite-map("icons-2x/*.png", $spacing: 10px);
    $all-icons: sprite-names($icons);

    @mixin sprite-background($name) {
  5. @starstuck starstuck revised this gist Aug 3, 2012. 1 changed file with 44 additions and 21 deletions.
    65 changes: 44 additions & 21 deletions compass-retina-sprites.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -1,26 +1,49 @@
    $sprites: sprite-map("sprites/*.png");
    $sprites-retina: sprite-map("sprites-retina/*.png");
    /**
    * Setup icons sprite
    *
    * It will create class names for all available icons.
    *
    * This uses custom function to prefix selectors from array. To get it working you will need to include following snippet in your config.rb
    *
    * module Sass::Script::Functions
    * def prefix_each(array, prefix)
    * return Sass::Script::String.new array.to_a.map{|item| prefix.value + item.value}.join(", ")
    * end
    * declare :join_prefixed, :args => [:array, :string]
    * end
    */

    $icons-spacing: 10px;
    $icons-2x-spacing: 20px;

    $icons: sprite-map("icons/*.png");
    $icons-2x: sprite-map("icons-2x/*.png");
    $all-icons: sprite-names($icons);

    @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) {
    // 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;
    }
    // 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);
    }
    background-position: sprite-position($icons, $name);
    background-repeat: no-repeat;
    display: block;
    height: image-height(sprite-file($icons, $name));
    width: image-width(sprite-file($icons, $name));
    @if (sprite-position($icons, $name) != sprite-position($icons-2x, $name)) {
    @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5) {
    $ypos: round(nth(sprite-position($icons-2x, $name), 2) / 2);
    background-position: 0 $ypos;
    }
    }
    }

    #{prefix-each($all-icons, ".icon-")} {
    background-image: sprite-url($icons);
    @media (-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5) {
    background-image: sprite-url($icons-2x);
    @include background-size(ceil(image-width(sprite-path($icons-2x)) / 2), auto);
    }
    }

    // Usage.
    .mail-icon {
    @include sprite-background(mail);
    @each $name in $all-icons{
    .icon-#{$name} {
    @include sprite-background(#{$name});
    }
    }
  6. @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);
    }
  7. @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);
  8. @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;
  9. @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);
    }