Sass Webp background-image Mixin (w/ modernizr)

webp-background-mixin.sass

// Mixin:
@mixin webp-background($webp, $fallback)
    .no-webp &, .no-js & 
        background-image: url($fallback)

    .webp &
        background-image: url($webp)
    

// Usage:
.container
    width: 500px
    height: 300px
    +webp-background('test.webp', 'test.jpg')
    
// Output:
.container {
  width: 500px;
  height: 300px;
}

.no-webp .container,
.no-js .container {
  background-image: url("test.jpg");
}

.webp .container {
  background-image: url("test.webp");
}