helper mixin to display responsive images

retina-images.scss

// helper mixin to display retina images
//
// @param {List *required} nth($display, 1) - display
// @param {List *optional} nth($display, 2) - width
//
// image-1x is display and hide on high resolution screens
// image-2x is hide and display on high resolution screens
//
// @use @include image-retina(inline, 60px);
@mixin image-retina($display...) {
    > .image-1x {
        display: nth($display, 1);

        @include hdpi(2) {
            display: none;
        }
    }

    > .image-2x {
        display: none;

        @include hdpi(2) {
            display: nth($display, 1);
        }
    }

    @if length($display) > 1 {
        > .image-1x,
        > .image-2x {
            width: nth($display, 2);
        }
    }
}

use.html

<a class="retina" href="#">
    <img class="image-1x" alt="youtic" src="/images/logoyoutic.png">
    <img class="image-2x" alt="youtic" src="/images/[email protected]">
</a>