WebP mixin for SASS with @supports detection

webp.scss

@mixin webp($webp, $fallback) {
    background: url($fallback);

    /* Chrome 66+, Edge 79+, Opera 53+, Android Brower 80+ */
    @media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution:.001dpcm) {
        @supports (background-image: -webkit-image-set(url($webp) 1x)) {
            background: -webkit-image-set(url($webp) 1x);
        }
    }

    /* FF 66+ */
    @supports (flex-basis: max-content) and (-moz-appearance: meterbar) {
        background: url($webp);
    }
}

// Usage
@include webp('hero.webp', 'hero.jpg');