imulus/retinajs — pull request #107 by irrationalistic (2013-09-10 01:02:28+00:00)
Title: Fix to take advantage of LESS media query nesting

Nesting media queries in less ends with the parent query being placed before the child query. Making the @highdpi a set rather than a single string means that each dpi check will also be nested with the parent query.

Example test:
@media only screen and (max-width: 500px) {
.element {
.at2x('images/test.png', 100px, 100px);
}
}

With original (max width is only applied to the webkit check):
@media only screen and (max-width: 500px) and (-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) {..}

With updated (max width is applied to all checks):
@media only screen and (max-width: 500px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (max-width: 500px) and (min--moz-device-pixel-ratio: 1.5), only screen and (max-width: 500px) and (-o-min-device-pixel-ratio: 3/2), only screen and (max-width: 500px) and (min-device-pixel-ratio: 1.5), only screen and (max-width: 500px) and (min-resolution: 1.5dppx) {}