Skip to content

Instantly share code, notes, and snippets.

@erikflowers

erikflowers/Less Retina Mixin Utility Class

Last active February 22, 2019 00:37
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save erikflowers/4522361 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save erikflowers/4522361 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. erikflowers revised this gist Jul 14, 2013. 1 changed file with 4 additions and 4 deletions.
    8 changes: 4 additions & 4 deletions Less Retina Mixin Utility Class
    View file
    Original file line number Diff line number Diff line change
    @@ -1,10 +1,10 @@
    // the retina mixin. An example goes: .at2x(img/header@2x.png, 650px, 150px, top, left, no-repeat, scroll)
    // Put the effective size, it goes width then height
    // Put the size that the image appears on a non-retina, e.g. if it's a 200px x 200px non-retina, that is the effective size. The @2x 400px x 400px is calculated automatically. The order to type it is width then height.
    // A modification of the retina.js less mixin - https://github.com/imulus/retinajs

    @highdpi: ~"(-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx)";

    .at2x(@path, @w: auto, @h: auto, @xpos: 0, @ypos: 0, @repeat: no-repeat; @attachment: scroll;) {
    @highdpi: ~"(-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx)";
    .at2x(@path, @w: auto, @h: auto, @xpos: 0, @ypos: 0, @repeat: no-repeat, @attachment: scroll) {
    background-image: url(@path);
    background-position: @xpos @ypos;
    background-repeat: @repeat;
    @@ -16,5 +16,5 @@
    background-position: @xpos @ypos;
    background-repeat: @repeat;
    background-attachment: @attachment;
    }
    }
    }
  2. erikflowers created this gist Jan 13, 2013.
    20 changes: 20 additions & 0 deletions Less Retina Mixin Utility Class
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,20 @@
    // the retina mixin. An example goes: .at2x(img/header@2x.png, 650px, 150px, top, left, no-repeat, scroll)
    // Put the effective size, it goes width then height
    // A modification of the retina.js less mixin - https://github.com/imulus/retinajs

    @highdpi: ~"(-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx)";

    .at2x(@path, @w: auto, @h: auto, @xpos: 0, @ypos: 0, @repeat: no-repeat; @attachment: scroll;) {
    background-image: url(@path);
    background-position: @xpos @ypos;
    background-repeat: @repeat;
    background-attachment: @attachment;
    @at2x_path: ~`"@{path}".split('.').slice(0, "@{path}".split('.').length - 1).join(".") + "@2x" + "." + "@{path}".split('.')["@{path}".split('.').length - 1]`;
    @media @highdpi {
    background-image: url(@at2x_path);
    background-size: @w @h;
    background-position: @xpos @ypos;
    background-repeat: @repeat;
    background-attachment: @attachment;
    }
    }