Skip to content

Instantly share code, notes, and snippets.

@adamstac

adamstac/_sass-retina.sass

Forked from jamesfinley/Hi-res Graphic Mixin
Created September 17, 2011 14:07
Download ZIP

Revisions

  1. Adam Stacoviak revised this gist Sep 17, 2011. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion _sass-retina.sass
    View file
    Original file line number Diff line number Diff line change
    @@ -4,5 +4,5 @@

    @media (-webkit-min-device-pixel-ratio: 2)
    &
    background-image: image-url($retina_name)
    background-image: image-url($retina-name)
    -webkit-background-size: $width $height
  2. Adam Stacoviak revised this gist Sep 17, 2011. 3 changed files with 14 additions and 24 deletions.
    24 changes: 0 additions & 24 deletions Hi-res Graphic Mixin
    View file
    Original file line number Diff line number Diff line change
    @@ -1,24 +0,0 @@
    @mixin hires-graphic($file, $type, $width, $height) {
    $file_name: $file + '.' + $type;
    $retina_name: $file + '_2x.' + $type;

    @media (-webkit-min-device-pixel-ratio: 2) {
    & {
    background-image: url('../images/' + $retina_name);
    -webkit-background-size: $width $height;
    }
    }
    }

    /*

    Example Use:
    .facebook {
    display: block;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    @include hires-graphic('icon_facebook', 'png', 20px, 20px);
    }

    */
    8 changes: 8 additions & 0 deletions _sass-retina.sass
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,8 @@
    @mixin hires-graphic($file, $type, $width, $height)
    $file-name: $file + "." + $type
    $retina-name: $file + "-retina." + $type

    @media (-webkit-min-device-pixel-ratio: 2)
    &
    background-image: image-url($retina_name)
    -webkit-background-size: $width $height
    6 changes: 6 additions & 0 deletions example.sass
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,6 @@
    .facebook
    display: block
    width: 20px
    height: 20px
    background-repeat: no-repeat
    @include hires-graphic('icon-facebook', 'png', 20px, 20px)
  3. @jamesfinley jamesfinley created this gist Aug 10, 2011.
    24 changes: 24 additions & 0 deletions Hi-res Graphic Mixin
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,24 @@
    @mixin hires-graphic($file, $type, $width, $height) {
    $file_name: $file + '.' + $type;
    $retina_name: $file + '_2x.' + $type;

    @media (-webkit-min-device-pixel-ratio: 2) {
    & {
    background-image: url('../images/' + $retina_name);
    -webkit-background-size: $width $height;
    }
    }
    }

    /*

    Example Use:
    .facebook {
    display: block;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    @include hires-graphic('icon_facebook', 'png', 20px, 20px);
    }

    */