sass 公用10个mixins代码块，助你拿下Offer，砥砺前行

}

}

3、SVG背景图片及PNG和retina回退

---

这个mixin依赖于Modernizr，在你在页面上创建图片的时候添加一些额外的代码。

你需要一个.svg文件作为默认的背景图片。此外还需要一个.png格式的图片作为在不支持SVG格式的浏览器上的回退。另外，你还需要一个2倍尺寸大小的.png格式的图片作为retina设备上的回退。

你所需要的图片一共有：

- pattern.svg

- pattern.png

- pattern@2x.png

$image-path: ‘…/img’ !default;

$fallback-extension: ‘png’ !default;

$retina-suffix: ‘@2x’;

@mixin background-image($name, $size:false){

background-image: url(#{ KaTeX parse error: Expected 'EOF', got '}' at position 11: image-path}̲/#{ name}.svg);

@if($size){

background-size: $size;

}

.no-svg &{

background-image: url(#{ KaTeX parse error: Expected 'EOF', got '}' at position 11: image-path}̲/#{ name}.#{$fallback-extension