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
I took this from the retina.js solution and modified it a bit. All credit goes to https://github.com/imulus/retinajs, I just tweaked this for my needs. This mixin includes most of the parameters you need, so you don't need to call them out twice. It can all be done in the mixin.
Raw
Less Retina Mixin Utility Class
// 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;
}
}
@erikflowers
Copy link
Copy Markdown
Author

erikflowers commented Jul 14, 2013

Less got stricter and I had some embarassing errors that used to work, but didn't, so they are now fixed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment