Retina + WebP Images Set Support for the any Node Tag!

// CONSTANTS
$pixels-density-list: 1 2;
$webp-support: '.webp-support';
$webp-format: 'webp';

// LAYOUTS LIST BELOW
$resoultions-tablet_mobile: tablet 'max-width: 1000px', mobile 'max-width: 600px';
$resoultions-only_tablet: tablet 'max-width: 1000px',; // "," - is a hack for a single object props;
$resoultions-only_mobile: mobile 'max-width: 600px',; // "," - is a hack for a single object props;

@mixin image-factory($folder, $layout, $name, $current-pixels, $type, $webp) {
  @if $webp {
    background-image: url($folder + $layout + '/'+ $name + '@' + $current-pixels + 'x.' + $webp-format);
  } @else {
    background-image: url($folder + $layout + '/'+ $name + '@' + $current-pixels + 'x.' + $type);
  }
}

@mixin generate-set($folder, $name, $type, $current-pixels, $layout) {
  @media (-webkit-min-device-pixel-ratio: $current-pixels) {
    @include image-factory($folder, $layout, $name, $current-pixels, $type, $webp: false);

    #{$webp-support} & {
      @include image-factory($folder, $layout, $name, $current-pixels, $type, $webp: true);
    }
  }
}

@mixin desktop-images($folder, $name, $type) {

  @each $current-pixels in $pixels-density-list {
    @include generate-set($folder, $name, $type, $current-pixels, $layout: 'desktop');
  }
}

@mixin touchscreen-images($folder, $name, $type, $layouts-list) {
  @each $current-resolution in $layouts-list {
    $layout: nth($current-resolution, 1);
    $resolution: nth($current-resolution, 2);

    @media ($resolution) {
      @each $current-pixels in $pixels-density-list {
        @include generate-set($folder, $name, $type, $current-pixels, $layout);
      }
    }
  }
}

@mixin progressive-images-set($folder, $name, $type, $layouts-list) {
  @include desktop-images($folder, $name, $type);
  @include touchscreen-images($folder, $name, $type, $layouts-list);
}