scss Sass - Mixins：SVG背景图片

Posted 2021-05-18

$image-path: '../img' !default;
$fallback-extension: 'png' !default;
$retina-suffix: '@2x';

@mixin background-image($name, $size:false){
  background-image: url(#{$image-path}/#{$name}.svg);
  @if($size){
    background-size: $size;
  }
  .no-svg &{
    background-image: url(#{$image-path}/#{$name}.#{$fallback-extension});

    @media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
      background-image: url(#{$image-path}/#{$name}#{$retina-suffix}.#{$fallback-extension});
    }
  }
}

/* Usage */

body {
  @include background-image('pattern');
}