scss 视网膜背景Mixin

Posted 2021-05-18

$retina: "only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx)";

@mixin retina-background($filename, $extension, $bgsize: cover) {
  background-image: url("#{$filename}.#{$extension}");

  @media #{$retina} {
    background-image: url("#{$filename}@2x.#{$extension}");
    -webkit-background-size: $bgsize;
    background-size: $bgsize;
  }
}