Forked from julienchazal/Less Retina Mixin Utility Class
Created
February 22, 2019 00:36
-
-
Save tiger8888/ab19cb91c3ce62d4f16d4c2a72480229 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment