Simplified for dumb lessphp

Author: matesd

src/retina.less

@@ -1,14 +1,28 @@
 // retina.less
 // A helper mixin for applying high-resolution background images (http://www.retinajs.com)
 
-@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) {
-  background-image: url(@path);
-  @at2x_path: ~`@{path}.replace(/\.\w+$/, function(match) { return "@2x" + match; })`;
+// If you use lessphp, complex stuff like replace won't go through. Thus I modified retina.less a bit.
 
-  @media @highdpi {
-    background-image: url("@{at2x_path}");
-    background-size: @w @h;
+// USAGE (e.g. for semantic logo <a href=""><img src="logo.png" alt=""></a>):
+//
+//	a {
+//		width: 100px;
+//		height: 50px;
+//		.at2x('imagePathWithoutExt','png');
+//		img {
+//			display: none; // be semantic if css is off
+//		}
+//	}
+
+// Submitted by Martin Doubravsky
+// martindoubravsky.com
+
+.at2x(@path, @ext: png) {
+  background-image: url(@path+'.'+@ext);
+  
+  @media (-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) {
+    background-image: url(@path+'@2x.'+@ext);
+    background-size: contain;
   }
 }