前言：

Sass封装倍图混合器是一种方便的工具，用于在编写CSS时处理高清适应性图片。倍图混合器可以实现自动地为不同分辨率的设备生成适当的背景图片。通过使用这个混合器，我们可以避免手动编写多个CSS规则来适应不同的设备像素比。

在使用Sass封装倍图混合器时，我们只需要在Sass文件中定义一个背景图片的变量，然后使用这个变量作为参数来调用混合器。混合器会自动根据设备的像素比来生成相应的CSS规则。这使得我们可以轻松地在代码中使用高清图片，而无需手动管理不同设备的适应性。

使用Sass封装倍图混合器的好处之一是它的灵活性。我们可以根据需要调整生成的CSS规则，以满足不同的设计要求。例如，我们可以设置不同的背景大小、位置和重复方式，以适应不同的布局需求。

总之，Sass封装倍图混合器是一个强大而方便的工具，可以帮助我们在编写CSS时处理高清适应性图片。它简化了代码的编写和管理，使得我们可以更轻松地创建适应不同分辨率设备的网页。

一、思路

1.使用Sass编译html的样式，利用混合器进行封装
2.利用@include使用封装好的混合器。
3.通过媒体查询判断设备的DPR
举个例子，当我们的设备的DPR为2的时候使用二倍图

  @media screen and (-webkit-min-device-pixel-ratio: 2) {.box {width:20px;height:20px;background: url('imgs/desc@2x.png') no-repeat center;background-size:100% 100%;}}

当我们的的设备的DPR为3的时候使用三倍图

  @media screen and (-webkit-min-device-pixel-ratio: 3) {.box {width:20px;height:20px;background: url('imgs/desc@3x.png') no-repeat center;background-size:100% 100%;}}

这里我们可以清楚的看到代码是相同的只有判断的DPR与背景图是不一样的，背景图的命名也是相似的，那么我们就可以将相同的代码提取出来进行封装。

二、封装代码

//混合器的名字为bg-img参数是$url
@mixin bg-img($url) {
//默认情况下使用二倍图（现在极少的手机的DPR是1（比如iphone3等）所以就不考虑DPR为1的情况）//背景图的路径background-image: url($url + "@2x.png");//背景图的大小（根据需求可以进行简写）background-size:100% 100% ;//不重复background-repeat: no-repeat;//判断设备的DPR为3的话，执行下面的代码（这里使用了-webkit前缀是为了处理浏览器内核为-webkit的兼容问题）：@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3) {//将传入的参数与后缀名进行拼接实际你得到的路径为“./../img/star36_on@3px.png”// $url是形参 background-image: url($url + "@3x.png");background-size:100% 100% ;background-repeat: no-repeat;}
}

在需要此样式的Scss中进行引入，举个例子，如下面的li，设置他的宽和高，使用@include引入混合器bg-img在其后面使用括号将参数传入

li{width: 0.533rem;height: 0.507rem;//这里括号中的内容就是传入$url的实参@include bg-image("./../img/star36_on");}

至此我们Sass封装的倍图混合器就结束了，赶快用起来吧！