/*
  What: Responsive Images in LESS.js
  Author: Anders Schmidt Hansen
  Author URL: http://www.andersschmidt.dk
  
  Notes: This is highly experimental. I just wanted to see if it worked
         and strangely enough, it did! There are quite some approaches out
         there for responsive images already, but why not propose an
         alternative? If you already have less.js running here's a different
         approach.

*/

/* Just some general stylings to get it going and scaling */
[data-src] { max-width: 100%; width: 100%; height: 450px;
             background-size: cover; 
             background-position: center center;
}


/* Remember to set this to your main images folder */
@main-path: 'http://www.andersschmidt.com/assets';


/* Either create folders with these names or change these to whatever */
@lowResPath: 'lo-res';
@hiResPath: 'hi-res';


/* Just don't touch these variables */
@lowPath: '@{main-path}/@{lowResPath}';
@hiPath: '@{main-path}/@{hiResPath}';


/* Funtion to grab from any resolution folder */
.lo-img(@file: null) { 
    @output: '@{lowPath}/@{file}';
    background-image: url(@output);
 }

.hi-img(@file: null) { 
  @output: '@{hiPath}/@{file}'; 
  background-image: url(@output); 
}



/* Instead of writing the URL in the front, we would do it here instead */
@media screen and (min-width: 320px) { 
  [data-src*="Image"] { .lo-img('lores.gif'); }



}

@media screen and (min-width: 520px) { 
  [data-src*="Image"] { .hi-img('hires.gif'); }




}

<!-- HTML. Concept: One tag, one source in the markup, split source calls in the CSS -->
<div data-src="Image" />

Example & Proof: tinkerbin.com/… (Set CSS dropdown to LESS or it won't work, hit CTRL+Return or "Run", reduce the window size to see the result)

This is highly experimental. I just wanted to see if it worked and strangely enough, it did! There are quite some approaches out there for responsive images already, but why not propose an alternative? If you already have less.js running here's a different stab at responsive images.