Skip to content

Instantly share code, notes, and snippets.

@goeko

goeko/input.scss

Forked from twe4ked/input.scss
Created June 15, 2012 19:52
Show Gist options
  • Save goeko/2938415 to your computer and use it in GitHub Desktop.
Save goeko/2938415 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @twe4ked twe4ked created this gist Dec 5, 2011.
    16 changes: 16 additions & 0 deletions input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,16 @@
    @mixin background-image-retina($file, $type, $width, $height) {
    background-image: url($file + '.' + $type);

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

    // Example
    #foo {
    @include background-image-retina('foobar', 'png', 10px, 20px);
    background: repeat;
    }
    7 changes: 7 additions & 0 deletions output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    #foo {
    background-image: url("foobar.png");
    background: repeat; }
    @media (-webkit-min-device-pixel-ratio: 2) {
    #foo {
    background-image: url("[email protected]");
    -webkit-background-size: 10px 20px; } }