Skip to content

Instantly share code, notes, and snippets.

@erikflowers
Last active February 22, 2019 00:37
Show Gist options
  • Star 18 You must be signed in to star a gist
  • Fork 4 You must be signed in to fork a gist
  • Save erikflowers/4522361 to your computer and use it in GitHub Desktop.
Save erikflowers/4522361 to your computer and use it in GitHub Desktop.
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.
// the retina mixin. An example goes: .at2x(img/header@2x.png, 650px, 150px, top, left, no-repeat, scroll)
// 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) {
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
Author

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