How to elegantly use webp in CSS

less
/*
    通过这个函数来引入图片，例如：
    #wrapper{ @include bg('../img/sample.jpg') }
    这段代码经过编译后便会生成如下两句代码
    #wrapper{ background-image:url('../img/sample.jpg'); }
    .webp #wrapper{ background-image:url('../img/sample.jpg.webp'); }
 */
.bg(@url) {
  background-image: url(@url);
  &.webp {
    background-image: url('@{url}.webp');
  }
}


sass 
.mixin(@url) {
    background-image: url(@url);
    .webps & {
        background-image: url('@{url}.webp');
    }
}