Retina mixins with banner width

Retina mixins with banner width

@mixin bg2x($path, $ext) {
	background-image: url($path + '.' + $ext);
	@media(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
		background-image: url($path + '@2x.' + $ext);
	}

}

@mixin retinaBg($urlimage, $ext) {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	@include bg2x($urlimage + '-1024', $ext);

	$sizes: 768, 1024, 1280, 1440, 1680, 1920;
	$breakpoint: 376px, 768px, 1024px, 1281px, 1441px, 1681px;
	@for $i from 1 through length($sizes) {
		@if $i < length($sizes) {
			@media (min-width: nth($breakpoint, $i)) {
				@include bg2x($urlimage + '-' + nth($sizes, $i), $ext)
			}
		}
	}
}