Less responsive background cover mixin

gistfile1.less

// variables
@screen-sm: 768px;
@screen-md: 992px;
@screen-lg: 1025px;


// utility mixin to set value on desired variable
// required as LESS doesn't support something like @break-@{var}: @val =(
.defineBreak(@var, @val) {
  .setBreak() when (@var = sm) {
    @break-sm: @val;
  }
  .setBreak() when (@var = md) {
    @break-md: @val;
  }
  .setBreak() when (@var = lg) {
    @break-lg: @val;
  }
  .setBreak();
}


// mixin to decide if the breakpoint should be set or fallback to previous breakpoint
// will fall back if a src is not defined.
// i.e. if you don't define @mobile the next src will have a min width media query of 0px
.chkSrc(@src, @break, @set, @fallback) when (@src = '') { .defineBreak(@break, @fallback) }
.chkSrc(@src, @break, @set, @fallback) when (default()) { .defineBreak(@break, @set) }



// generate classes and media queries for background cover image
.full-width-bg-image(@name, @path, @desktop: '', @mobile: '', @tabletPortrait: '', @tabletLandscape: '', @xpos: center, @ypos: center) {

  // set media breakpoints
  @break-xs: 0px;
  .chkSrc(@mobile, sm, @screen-sm, @break-xs);
  .chkSrc(@tabletPortrait, md, @screen-md, @break-sm);
  .chkSrc(@tabletLandscape, lg, @screen-lg, @break-md);

  // default styles
  .tile-image-@{name} {
    background-position: @xpos @ypos;
    background-repeat: no-repeat;
    background-size: cover;
  }

  & when not (@mobile = '') {
    // mobile specific
    @media only screen and (min-width: @break-xs) {
      @mobile-src: '@{path}@{mobile}';

      .tile-image-@{name} {
        background-image: url(@mobile-src);

        // IE fallback
        .lt-ie9 & {
          filter: ~"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='@{mobile-src}', sizingMethod='scale')";
        }
      }
    }
  }

  & when not (@tabletPortrait = '') {
    // tablet specific
    @media only screen and (min-width: @break-sm) {
      @tabletPortrait-src: '@{path}@{tabletPortrait}';

      .tile-image-@{name} {
        background-image: url(@tabletPortrait-src);

        // IE fallback
        .lt-ie9 & {
          filter: ~"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='@{tabletPortrait-src}', sizingMethod='scale')";
        }
      }
    }
  }

  & when not (@tabletLandscape = '') {
    // landscape tablet specific
    @media only screen and (min-width: @break-md) {
      @tabletLandscape-src: '@{path}@{tabletLandscape}';

      .tile-image-@{name} {
        background-image: url(@tabletLandscape-src);

        // IE fallback
        .lt-ie9 & {
          filter: ~"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='@{tabletLandscape-src}', sizingMethod='scale')";
        }
      }
    }
  }

  & when not (@desktop = '') {
    @media only screen and (min-width: @break-lg){
      @desktop-src: '@{path}@{desktop}';

      .tile-image-@{name} {
        background-image: url(@desktop-src);

        // IE fallback
        .lt-ie9 & {
          filter: ~"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='@{desktop-src}', sizingMethod='scale')";
        }
      }
    }
  }
}

// Eaxmple call
.full-width-bg-image(@name: img1, @path: '/images/', @desktop: 'img1.jpg', @mobile: 'img1-mobile.jpg', @xpos: center, @ypos: top);
// renders to
.tile-image-img1 {
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}
@media only screen and (min-width: 0px) {
  .tile-image-img1 {
    background-image: url('/images/img1-mobile.jpg');
  }
  .lt-ie9 .tile-image-img1 {
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/img1-mobile.jpg', sizingMethod='scale');
  }
}
@media only screen and (min-width: 768px) {
  .tile-image-img1 {
    background-image: url('/images/img1.jpg');
  }
  .lt-ie9 .tile-image-img1 {
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/img1.jpg', sizingMethod='scale');
  }
}