brandonb927 · December 1, 2019 15:38 · Oct 4, 2014 · Oct 4, 2014 · Feb 14, 2014 · Feb 14, 2014
diff --git a/image-2x.less b/image-2x.less
@@ -1,6 +1,8 @@
 /**
  * I converted the SCSS mixin to LESS for the awesome coders like myself in response to a blog post on 37Signals - http://37signals.com/svn/posts/3271-easy-retina-ready-images-using-scss
  * 
+ * Update: 2014-08-04 - Updated a long-standing bug where retina images were shown no matter what in the first background-image property.
+ *                    - Updated retina media query to be more reliable ()
  * Update: 2013-11-13 - Picked up another technique thanks to reading this post from Tyler Tate, auto-fill in the second filename for the retina image, http://tylertate.com/blog/2013/06/11/retina-images-using-media-queries-and-LESS-CSS.html
  * Update: 2013-04-16 - Have recently found a few use cases when using a retina pattern from Subtle Patterns on the <body>, this has come in handy
  * Update: 2013-04-05 - Some research in the Wordpress Core(http://core.trac.wordpress.org/ticket/22238#comment:5) was pointed out that some tests may be redundant (Thanks @kbav) so I've cleaned these up
@@ -15,10 +17,13 @@
   background-image: ~`"url(@{filename}.@{extension})"`;
   background-repeat: @repeat;
 
-  @media print, screen,
-    (-webkit-min-device-pixel-ratio: 1.25),
-    (min-device-pixel-ratio: 1.25),
-    (min-resolution: 120dpi) {
+  @media
+    only screen and (-webkit-min-device-pixel-ratio: 2),
+    only screen and (   min--moz-device-pixel-ratio: 2),
+    only screen and (     -o-min-device-pixel-ratio: 2/1),
+    only screen and (        min-device-pixel-ratio: 2),
+    only screen and (                min-resolution: 192dpi),
+    only screen and (                min-resolution: 2dppx) {
       /* on retina, use image that's scaled by 2 */
       background-image: ~`"url(@{filename}@2x.@{extension})"`;
       background-size: @width @height;

diff --git a/image-2x.less b/image-2x.less
@@ -12,7 +12,7 @@
 .image-2x(@image, @width, @height, @repeat: no-repeat) {
   @filename  : ~`/(.*)\.(jpg|jpeg|png|gif)/.exec(@{image})[1]`;
   @extension : ~`/(.*)\.(jpg|jpeg|png|gif)/.exec(@{image})[2]`;
-  background-image: ~`"url(@{filename}@2x.@{extension})"`;
+  background-image: ~`"url(@{filename}.@{extension})"`;
   background-repeat: @repeat;
 
   @media print, screen,

diff --git a/image-2x.less b/image-2x.less
@@ -14,6 +14,7 @@
   @extension : ~`/(.*)\.(jpg|jpeg|png|gif)/.exec(@{image})[2]`;
   background-image: ~`"url(@{filename}@2x.@{extension})"`;
   background-repeat: @repeat;
+
   @media print, screen,
     (-webkit-min-device-pixel-ratio: 1.25),
     (min-device-pixel-ratio: 1.25),

diff --git a/image-2x.less b/image-2x.less
@@ -32,7 +32,7 @@
 .image-logo {
   width: 100px;
   height: 50px;
-  .image-2x('image.png', 134px, 52px);
+  .image-2x('image.png', 100px, 50px);
 }
 
 .reapeating-background-image {

diff --git a/image-2x.less b/image-2x.less
@@ -24,6 +24,11 @@
   }
 }
 
+/**
+ * The filename convention for the retina-sized image is image@2x.png, 
+ * but of course you can change this in the mixin when you use it
+ */
+
 .image-logo {
   width: 100px;
   height: 50px;

diff --git a/image-2x.less b/image-2x.less
@@ -18,7 +18,7 @@
     (-webkit-min-device-pixel-ratio: 1.25),
     (min-device-pixel-ratio: 1.25),
     (min-resolution: 120dpi) {
-      // on retina, use image that's scaled by 2
+      /* on retina, use image that's scaled by 2 */
       background-image: ~`"url(@{filename}@2x.@{extension})"`;
       background-size: @width @height;
   }

diff --git a/image-2x.less b/image-2x.less
@@ -1,12 +1,13 @@
-// I converted the SCSS mixin to LESS for the awesome coders like myself in response to a blog post on 37Signals - http://37signals.com/svn/posts/3271-easy-retina-ready-images-using-scss
-
-// Update: 2013-11-13 - Picked up another technique thanks to reading this post from Tyler Tate, auto-fill in the second filename for the retina image, http://tylertate.com/blog/2013/06/11/retina-images-using-media-queries-and-LESS-CSS.html
-// Update: 2013-04-16 - Have recently found a few use cases when using a retina pattern from Subtle Patterns on the <body>, this has come in handy
-// Update: 2013-04-05 - Some research in the Wordpress Core(http://core.trac.wordpress.org/ticket/22238#comment:5) was pointed out that some tests may be redundant (Thanks @kbav) so I've cleaned these up
-// Update: 2012-12-29 - Updated AGAIN to add MS IE10 declaration and fix wonky 'min--moz-' declaration which Mozilla engineers are aware of
-// Update: 2012-11-21 - Updated again based on information from an article I found, added dppx and changed opera ratio to target more devices (http://www.uifuel.com/hd-retina-display-media-queries/)
-// Update: 2012-11-17 - Updated based on Wordpress Core to target even more devices! Thanks @Wordpress <3 (http://core.trac.wordpress.org/changeset/22629)
-
+/**
+ * I converted the SCSS mixin to LESS for the awesome coders like myself in response to a blog post on 37Signals - http://37signals.com/svn/posts/3271-easy-retina-ready-images-using-scss
+ * 
+ * Update: 2013-11-13 - Picked up another technique thanks to reading this post from Tyler Tate, auto-fill in the second filename for the retina image, http://tylertate.com/blog/2013/06/11/retina-images-using-media-queries-and-LESS-CSS.html
+ * Update: 2013-04-16 - Have recently found a few use cases when using a retina pattern from Subtle Patterns on the <body>, this has come in handy
+ * Update: 2013-04-05 - Some research in the Wordpress Core(http://core.trac.wordpress.org/ticket/22238#comment:5) was pointed out that some tests may be redundant (Thanks @kbav) so I've cleaned these up
+ * Update: 2012-12-29 - Updated AGAIN to add MS IE10 declaration and fix wonky 'min--moz-' declaration which Mozilla engineers are aware of
+ * Update: 2012-11-21 - Updated again based on information from an article I found, added dppx and changed opera ratio to target more devices (http://www.uifuel.com/hd-retina-display-media-queries/)
+ * Update: 2012-11-17 - Updated based on Wordpress Core to target even more devices! Thanks @Wordpress <3 (http://core.trac.wordpress.org/changeset/22629)
+ */
 
 .image-2x(@image, @width, @height, @repeat: no-repeat) {
   @filename  : ~`/(.*)\.(jpg|jpeg|png|gif)/.exec(@{image})[1]`;

diff --git a/gistfile1.less → image-2x.less b/gistfile1.less → image-2x.less
@@ -9,27 +9,27 @@
 
 
 .image-2x(@image, @width, @height, @repeat: no-repeat) {
-    @filename  : ~`/(.*)\.(jpg|jpeg|png|gif)/.exec(@{image})[1]`;
-    @extension : ~`/(.*)\.(jpg|jpeg|png|gif)/.exec(@{image})[2]`;
-    background-image: ~`"url(@{filename}@2x.@{extension})"`;
-    background-repeat: @repeat;
-    @media print, screen,
-        (-webkit-min-device-pixel-ratio: 1.25),
-        (min-device-pixel-ratio: 1.25),
-        (min-resolution: 120dpi) {
-            // on retina, use image that's scaled by 2
-            background-image: ~`"url(@{filename}@2x.@{extension})"`;
-            background-size: @width @height;
-    }
+  @filename  : ~`/(.*)\.(jpg|jpeg|png|gif)/.exec(@{image})[1]`;
+  @extension : ~`/(.*)\.(jpg|jpeg|png|gif)/.exec(@{image})[2]`;
+  background-image: ~`"url(@{filename}@2x.@{extension})"`;
+  background-repeat: @repeat;
+  @media print, screen,
+    (-webkit-min-device-pixel-ratio: 1.25),
+    (min-device-pixel-ratio: 1.25),
+    (min-resolution: 120dpi) {
+      // on retina, use image that's scaled by 2
+      background-image: ~`"url(@{filename}@2x.@{extension})"`;
+      background-size: @width @height;
+  }
 }
 
 .image-logo {
-    width: 100px;
-    height: 50px;
-    .image-2x('image.png', 134px, 52px);
+  width: 100px;
+  height: 50px;
+  .image-2x('image.png', 134px, 52px);
 }
 
 .reapeating-background-image {
-    background-color: #444;
-    .image-2x('image.png', 200px, 200px, repeat);
+  background-color: #444;
+  .image-2x('image.png', 200px, 200px, repeat);
 }
diff --git a/gistfile1.txt → gistfile1.less b/gistfile1.txt → gistfile1.less
diff --git a/gistfile1.txt b/gistfile1.txt
@@ -26,10 +26,10 @@
 .image-logo {
     width: 100px;
     height: 50px;
-    .image-2x('image.png', 'image@2x.png', 134px, 52px);
+    .image-2x('image.png', 134px, 52px);
 }
 
 .reapeating-background-image {
     background-color: #444;
-    .image-2x('image.png', 'image@2X.png', 200px, 200px, repeat);
+    .image-2x('image.png', 200px, 200px, repeat);
 }
diff --git a/gistfile1.txt b/gistfile1.txt
@@ -1,15 +1,10 @@
 // I converted the SCSS mixin to LESS for the awesome coders like myself in response to a blog post on 37Signals - http://37signals.com/svn/posts/3271-easy-retina-ready-images-using-scss
 
 // Update: 2013-11-13 - Picked up another technique thanks to reading this post from Tyler Tate, auto-fill in the second filename for the retina image, http://tylertate.com/blog/2013/06/11/retina-images-using-media-queries-and-LESS-CSS.html
-
 // Update: 2013-04-16 - Have recently found a few use cases when using a retina pattern from Subtle Patterns on the <body>, this has come in handy
-
 // Update: 2013-04-05 - Some research in the Wordpress Core(http://core.trac.wordpress.org/ticket/22238#comment:5) was pointed out that some tests may be redundant (Thanks @kbav) so I've cleaned these up
-
 // Update: 2012-12-29 - Updated AGAIN to add MS IE10 declaration and fix wonky 'min--moz-' declaration which Mozilla engineers are aware of
-
 // Update: 2012-11-21 - Updated again based on information from an article I found, added dppx and changed opera ratio to target more devices (http://www.uifuel.com/hd-retina-display-media-queries/)
-
 // Update: 2012-11-17 - Updated based on Wordpress Core to target even more devices! Thanks @Wordpress <3 (http://core.trac.wordpress.org/changeset/22629)
 
 

diff --git a/gistfile1 → gistfile1.txt b/gistfile1 → gistfile1.txt
@@ -1,5 +1,7 @@
 // I converted the SCSS mixin to LESS for the awesome coders like myself in response to a blog post on 37Signals - http://37signals.com/svn/posts/3271-easy-retina-ready-images-using-scss
 
+// Update: 2013-11-13 - Picked up another technique thanks to reading this post from Tyler Tate, auto-fill in the second filename for the retina image, http://tylertate.com/blog/2013/06/11/retina-images-using-media-queries-and-LESS-CSS.html
+
 // Update: 2013-04-16 - Have recently found a few use cases when using a retina pattern from Subtle Patterns on the <body>, this has come in handy
 
 // Update: 2013-04-05 - Some research in the Wordpress Core(http://core.trac.wordpress.org/ticket/22238#comment:5) was pointed out that some tests may be redundant (Thanks @kbav) so I've cleaned these up
@@ -10,17 +12,20 @@
 
 // Update: 2012-11-17 - Updated based on Wordpress Core to target even more devices! Thanks @Wordpress <3 (http://core.trac.wordpress.org/changeset/22629)
 
-.image-2x(@image1, @image2, @width, @height, @repeat: no-repeat) {
-    background-image: url('@{image1}');
+
+.image-2x(@image, @width, @height, @repeat: no-repeat) {
+    @filename  : ~`/(.*)\.(jpg|jpeg|png|gif)/.exec(@{image})[1]`;
+    @extension : ~`/(.*)\.(jpg|jpeg|png|gif)/.exec(@{image})[2]`;
+    background-image: ~`"url(@{filename}@2x.@{extension})"`;
     background-repeat: @repeat;
     @media print, screen,
         (-webkit-min-device-pixel-ratio: 1.25),
         (min-device-pixel-ratio: 1.25),
         (min-resolution: 120dpi) {
             // on retina, use image that's scaled by 2
-            background-image: url('@{image2}');
+            background-image: ~`"url(@{filename}@2x.@{extension})"`;
             background-size: @width @height;
-            .background-size(@width, @height); }
+    }
 }
 
 .image-logo {

diff --git a/gistfile1 b/gistfile1
@@ -1,4 +1,6 @@
-// I converted the SCSS mixin to LESS for the lazy coders like myself in response to this blog post  (http://37signals.com/svn/posts/3271-easy-retina-ready-images-using-scss)
+// I converted the SCSS mixin to LESS for the awesome coders like myself in response to a blog post on 37Signals - http://37signals.com/svn/posts/3271-easy-retina-ready-images-using-scss
+
+// Update: 2013-04-16 - Have recently found a few use cases when using a retina pattern from Subtle Patterns on the <body>, this has come in handy
 
 // Update: 2013-04-05 - Some research in the Wordpress Core(http://core.trac.wordpress.org/ticket/22238#comment:5) was pointed out that some tests may be redundant (Thanks @kbav) so I've cleaned these up
 
@@ -8,21 +10,26 @@
 
 // Update: 2012-11-17 - Updated based on Wordpress Core to target even more devices! Thanks @Wordpress <3 (http://core.trac.wordpress.org/changeset/22629)
 
-.image-2x(@image1, @image2, @width, @height) {
+.image-2x(@image1, @image2, @width, @height, @repeat: no-repeat) {
     background-image: url('@{image1}');
-    background-repeat: no-repeat;
-    @media
-        print,
-        (-o-min-device-pixel-ratio: 5/4),
+    background-repeat: @repeat;
+    @media print, screen,
         (-webkit-min-device-pixel-ratio: 1.25),
+        (min-device-pixel-ratio: 1.25),
         (min-resolution: 120dpi) {
             // on retina, use image that's scaled by 2
             background-image: url('@{image2}');
-            background-size: @width @height; }
+            background-size: @width @height;
+            .background-size(@width, @height); }
 }
 
 .image-logo {
     width: 100px;
     height: 50px;
     .image-2x('image.png', 'image@2x.png', 134px, 52px);
+}
+
+.reapeating-background-image {
+    background-color: #444;
+    .image-2x('image.png', 'image@2X.png', 200px, 200px, repeat);
 }
diff --git a/gistfile1 b/gistfile1
@@ -9,7 +9,8 @@
 // Update: 2012-11-17 - Updated based on Wordpress Core to target even more devices! Thanks @Wordpress <3 (http://core.trac.wordpress.org/changeset/22629)
 
 .image-2x(@image1, @image2, @width, @height) {
-    background-image: url('@{image1}') no-repeat;
+    background-image: url('@{image1}');
+    background-repeat: no-repeat;
     @media
         print,
         (-o-min-device-pixel-ratio: 5/4),

diff --git a/gistfile1 b/gistfile1
@@ -9,7 +9,7 @@
 // Update: 2012-11-17 - Updated based on Wordpress Core to target even more devices! Thanks @Wordpress <3 (http://core.trac.wordpress.org/changeset/22629)
 
 .image-2x(@image1, @image2, @width, @height) {
-    background-image: url('@{image}') no-repeat;
+    background-image: url('@{image1}') no-repeat;
     @media
         print,
         (-o-min-device-pixel-ratio: 5/4),

diff --git a/gistfile1 b/gistfile1
@@ -12,10 +12,9 @@
     background-image: url('@{image}') no-repeat;
     @media
         print,
-        (~`"-o-min-device-pixel-ratio: 1.25/1"`),
+        (-o-min-device-pixel-ratio: 5/4),
         (-webkit-min-device-pixel-ratio: 1.25),
-        (min-resolution: 120dpi),
-        (min-resolution: 1.25dppx) {
+        (min-resolution: 120dpi) {
             // on retina, use image that's scaled by 2
             background-image: url('@{image2}');
             background-size: @width @height; }

diff --git a/gistfile1 b/gistfile1
@@ -1,31 +1,28 @@
-I converted the SCSS mixin to LESS for the lazy coders like myself in response to this blog post  (http://37signals.com/svn/posts/3271-easy-retina-ready-images-using-scss)
+// I converted the SCSS mixin to LESS for the lazy coders like myself in response to this blog post  (http://37signals.com/svn/posts/3271-easy-retina-ready-images-using-scss)
 
-Update: 2012-12-29 - Updated AGAIN to add MS IE10 declaration and fix wonky 'min--moz-' declaration which Mozilla engineers are aware of
+// Update: 2013-04-05 - Some research in the Wordpress Core(http://core.trac.wordpress.org/ticket/22238#comment:5) was pointed out that some tests may be redundant (Thanks @kbav) so I've cleaned these up
 
-Update: 2012-11-21 - Updated again based on information from an article I found, added dppx and changed opera ratio to target more devices (http://www.uifuel.com/hd-retina-display-media-queries/)
+// Update: 2012-12-29 - Updated AGAIN to add MS IE10 declaration and fix wonky 'min--moz-' declaration which Mozilla engineers are aware of
 
-Update: 2012-11-17 - Updated based on Wordpress Core to target even more devices! Thanks @Wordpress <3 (http://core.trac.wordpress.org/changeset/22629)
+// Update: 2012-11-21 - Updated again based on information from an article I found, added dppx and changed opera ratio to target more devices (http://www.uifuel.com/hd-retina-display-media-queries/)
 
-.image-2x(@image, @width, @height) {
-  @media print,
-    screen,
-    (-webkit-min-device-pixel-ratio: 1.25),
-    (~`"-o-min-device-pixel-ratio: 1.25/1"`),
-    (min--moz-device-pixel-ratio: 1.25),
-    (-moz-min-device-pixel-ratio: 1.25),
-    (-ms-min-device-pixel-ratio: 1.25),
-    (min-device-pixel-ratio: 1.25),
-    (min-resolution: 120dpi),
-    (min-resolution: 1.25dppx) {
-      /* on retina, use image that's scaled by 2 */
-      background-image: url('@{image}');
-      background-size: @width @height;
-    }
+// Update: 2012-11-17 - Updated based on Wordpress Core to target even more devices! Thanks @Wordpress <3 (http://core.trac.wordpress.org/changeset/22629)
+
+.image-2x(@image1, @image2, @width, @height) {
+    background-image: url('@{image}') no-repeat;
+    @media
+        print,
+        (~`"-o-min-device-pixel-ratio: 1.25/1"`),
+        (-webkit-min-device-pixel-ratio: 1.25),
+        (min-resolution: 120dpi),
+        (min-resolution: 1.25dppx) {
+            // on retina, use image that's scaled by 2
+            background-image: url('@{image2}');
+            background-size: @width @height; }
 }
 
 .image-logo {
-  width: 100px;
-  height: 50px;
-  background: url('image.png') no-repeat;
-  .image-2x('image@2x.png', 134px, 52px);
+    width: 100px;
+    height: 50px;
+    .image-2x('image.png', 'image@2x.png', 134px, 52px);
 }
diff --git a/gistfile1.txt → gistfile1 b/gistfile1.txt → gistfile1
@@ -1,5 +1,7 @@
 I converted the SCSS mixin to LESS for the lazy coders like myself in response to this blog post  (http://37signals.com/svn/posts/3271-easy-retina-ready-images-using-scss)
 
+Update: 2012-12-29 - Updated AGAIN to add MS IE10 declaration and fix wonky 'min--moz-' declaration which Mozilla engineers are aware of
+
 Update: 2012-11-21 - Updated again based on information from an article I found, added dppx and changed opera ratio to target more devices (http://www.uifuel.com/hd-retina-display-media-queries/)
 
 Update: 2012-11-17 - Updated based on Wordpress Core to target even more devices! Thanks @Wordpress <3 (http://core.trac.wordpress.org/changeset/22629)
@@ -10,6 +12,8 @@ Update: 2012-11-17 - Updated based on Wordpress Core to target even more devices
     (-webkit-min-device-pixel-ratio: 1.25),
     (~`"-o-min-device-pixel-ratio: 1.25/1"`),
     (min--moz-device-pixel-ratio: 1.25),
+    (-moz-min-device-pixel-ratio: 1.25),
+    (-ms-min-device-pixel-ratio: 1.25),
     (min-device-pixel-ratio: 1.25),
     (min-resolution: 120dpi),
     (min-resolution: 1.25dppx) {

diff --git a/gistfile1.txt b/gistfile1.txt
@@ -1,15 +1,18 @@
 I converted the SCSS mixin to LESS for the lazy coders like myself in response to this blog post  (http://37signals.com/svn/posts/3271-easy-retina-ready-images-using-scss)
 
+Update: 2012-11-21 - Updated again based on information from an article I found, added dppx and changed opera ratio to target more devices (http://www.uifuel.com/hd-retina-display-media-queries/)
+
 Update: 2012-11-17 - Updated based on Wordpress Core to target even more devices! Thanks @Wordpress <3 (http://core.trac.wordpress.org/changeset/22629)
 
 .image-2x(@image, @width, @height) {
   @media print,
     screen,
     (-webkit-min-device-pixel-ratio: 1.25),
-    (-o-min-device-pixel-ratio: 5/4),
+    (~`"-o-min-device-pixel-ratio: 1.25/1"`),
     (min--moz-device-pixel-ratio: 1.25),
     (min-device-pixel-ratio: 1.25),
-    (min-resolution: 120dpi) {
+    (min-resolution: 120dpi),
+    (min-resolution: 1.25dppx) {
       /* on retina, use image that's scaled by 2 */
       background-image: url('@{image}');
       background-size: @width @height;

diff --git a/gistfile1.txt b/gistfile1.txt
@@ -3,11 +3,13 @@ I converted the SCSS mixin to LESS for the lazy coders like myself in response t
 Update: 2012-11-17 - Updated based on Wordpress Core to target even more devices! Thanks @Wordpress <3 (http://core.trac.wordpress.org/changeset/22629)
 
 .image-2x(@image, @width, @height) {
-  @media only screen and (-webkit-min-device-pixel-ratio: 1.25),
-    only screen and (-o-min-device-pixel-ratio: 5/4),
-    only screen and (min--moz-device-pixel-ratio: 1.25),
-    only screen and (min-device-pixel-ratio: 1.25),
-    only screen and (min-resolution: 120dpi) {
+  @media print,
+    screen,
+    (-webkit-min-device-pixel-ratio: 1.25),
+    (-o-min-device-pixel-ratio: 5/4),
+    (min--moz-device-pixel-ratio: 1.25),
+    (min-device-pixel-ratio: 1.25),
+    (min-resolution: 120dpi) {
       /* on retina, use image that's scaled by 2 */
       background-image: url('@{image}');
       background-size: @width @height;

diff --git a/gistfile1.txt b/gistfile1.txt
@@ -1,5 +1,7 @@
 I converted the SCSS mixin to LESS for the lazy coders like myself in response to this blog post  (http://37signals.com/svn/posts/3271-easy-retina-ready-images-using-scss)
 
+Update: 2012-11-17 - Updated based on Wordpress Core to target even more devices! Thanks @Wordpress <3 (http://core.trac.wordpress.org/changeset/22629)
+
 .image-2x(@image, @width, @height) {
   @media only screen and (-webkit-min-device-pixel-ratio: 1.25),
     only screen and (-o-min-device-pixel-ratio: 5/4),

diff --git a/gistfile1.txt b/gistfile1.txt
@@ -1,20 +1,20 @@
 I converted the SCSS mixin to LESS for the lazy coders like myself in response to this blog post  (http://37signals.com/svn/posts/3271-easy-retina-ready-images-using-scss)
 
 .image-2x(@image, @width, @height) {
-	@media only screen and (-webkit-min-device-pixel-ratio: 1.3),
-		only screen and (-o-min-device-pixel-ratio: 3/2),
-		only screen and (min--moz-device-pixel-ratio: 1.3),
-		only screen and (min-device-pixel-ratio: 1.3),
-		only screen and (min-resolution: 1.3dppx) {
-		/* on retina, use image that's scaled by 2 */
-		background-image: url('@{image}');
-		background-size: @width @height;
-	}
+  @media only screen and (-webkit-min-device-pixel-ratio: 1.25),
+    only screen and (-o-min-device-pixel-ratio: 5/4),
+    only screen and (min--moz-device-pixel-ratio: 1.25),
+    only screen and (min-device-pixel-ratio: 1.25),
+    only screen and (min-resolution: 120dpi) {
+      /* on retina, use image that's scaled by 2 */
+      background-image: url('@{image}');
+      background-size: @width @height;
+    }
 }
 
 .image-logo {
-	width: 100px;
-	height: 50px;
-	background: url('image.png') no-repeat;
-	.image-2x('image@2x.png', 134px, 52px);
+  width: 100px;
+  height: 50px;
+  background: url('image.png') no-repeat;
+  .image-2x('image@2x.png', 134px, 52px);
 }
diff --git a/gistfile1.txt b/gistfile1.txt
@@ -1,10 +1,10 @@
 I converted the SCSS mixin to LESS for the lazy coders like myself in response to this blog post  (http://37signals.com/svn/posts/3271-easy-retina-ready-images-using-scss)
 
 .image-2x(@image, @width, @height) {
-	@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+	@media only screen and (-webkit-min-device-pixel-ratio: 1.3),
 		only screen and (-o-min-device-pixel-ratio: 3/2),
-		only screen and (min--moz-device-pixel-ratio: 1.5),
-		only screen and (min-device-pixel-ratio: 1.5),
+		only screen and (min--moz-device-pixel-ratio: 1.3),
+		only screen and (min-device-pixel-ratio: 1.3),
 		only screen and (min-resolution: 1.3dppx) {
 		/* on retina, use image that's scaled by 2 */
 		background-image: url('@{image}');

diff --git a/gistfile1.txt b/gistfile1.txt
@@ -0,0 +1,20 @@
+I converted the SCSS mixin to LESS for the lazy coders like myself in response to this blog post  (http://37signals.com/svn/posts/3271-easy-retina-ready-images-using-scss)
+
+.image-2x(@image, @width, @height) {
+	@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+		only screen and (-o-min-device-pixel-ratio: 3/2),
+		only screen and (min--moz-device-pixel-ratio: 1.5),
+		only screen and (min-device-pixel-ratio: 1.5),
+		only screen and (min-resolution: 1.3dppx) {
+		/* on retina, use image that's scaled by 2 */
+		background-image: url('@{image}');
+		background-size: @width @height;
+	}
+}
+
+.image-logo {
+	width: 100px;
+	height: 50px;
+	background: url('image.png') no-repeat;
+	.image-2x('image@2x.png', 134px, 52px);
+}
No results found