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');
}
}