Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
scss background-image: url() mixin
@mixin bg-url($url, $url2x: false, $webp1x: false, $webp2x: false) {
background-image: url($url);
@if $webp1x {
.webp & {
background-image: url($webp1x);
}
}
@if $url2x {
@media
screen and (-webkit-min-device-pixel-ratio: 2),
screen and (min-resolution: 192dpi),
screen and (min-resolution: 2dppx) {
background-image: url($url2x);
@if $webp2x {
.webp & {
background-image: url($webp2x);
}
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment