Auto retina images with background-size

devices-mixins.less

@screenMobile:  320px;
@screenTablet:  768px;
@screenDesktop: 992px;
@screenLarge:   1200px;
@screenExtraLarge:   1600px;

.mobile(@rules, @invert: false) {
  .mixin (@invert) when (@invert = false) {
    @query: ~"(min-width: @{screenMobile})";
    @media @query {
      @rules();
    };
  };
  .mixin (@invert) when (@invert = true) {
    @query: ~"(max-width: @{screenMobile})";
    @media @query {
      @rules();
    };
  };
  .mixin(@invert);
};

.tablet(@rules, @invert: false) {
  .mixin (@invert) when (@invert = false) {
    @query: ~"(min-width: @{screenTablet})";
    @media @query {
      @rules();
    };
  };
  .mixin (@invert) when (@invert = true) {
    @query: ~"(max-width: @{screenTablet})";
    @media @query {
      @rules();
    };
  };
  .mixin(@invert);
};

.desktop(@rules, @invert: false) {
  .mixin (@invert) when (@invert = false) {
    @query: ~"(min-width: @{screenDesktop})";
    @media @query {
      @rules();
    };
  };
  .mixin (@invert) when (@invert = true) {
    @query: ~"(max-width: @{screenDesktop})";
    @media @query {
      @rules();
    };
  };
  .mixin(@invert);
};

.large(@rules, @invert: false) {
  .mixin (@invert) when (@invert = false) {
    @query: ~"(min-width: @{screenLarge})";
    @media @query {
      @rules();
    };
  };
  .mixin (@invert) when (@invert = true) {
    @query: ~"(max-width: @{screenLarge})";
    @media @query {
      @rules();
    };
  };
  .mixin(@invert);
};

.extraLarge(@rules, @invert: false) {
  .mixin (@invert) when (@invert = false) {
    @query: ~"(min-width: @{screenExtraLarge})";
    @media @query {
      @rules();
    };
  };
  .mixin (@invert) when (@invert = true) {
    @query: ~"(max-width: @{screenExtraLarge})";
    @media @query {
      @rules();
    };
  };
  .mixin(@invert);
};

retinize.less

.image(@img, @type: auto){
  @filename  : ~`/(.*)\.(jpg|jpeg|png|gif)/.exec(@{img})[1]`;
  @extension : ~`/(.*)\.(jpg|jpeg|png|gif)/.exec(@{img})[2]`;

  background-image:~"url(@{imgPath}@{filename}.@{extension})";
  .lh-background-size(@type);

  &.retina {
    background-image:~"url(@{imgPath}@{filename}@2x.@{extension})";
    .lh-background-size(@type);
  };
};