以根据不同屏幕吃寸动态应用背景图片为例
新建一个mixin如下:
@mixin bg_img($path, $ext){
@media screen and (max-device-width: 768px){
background: url($path + '@1x.' + $ext) no-repeat center;
}
@media screen and (min-device-width: 768px){
background: url($path + '@2x.' + $ext) no-repeat center;
}
}
在css中的使用如下:
div{
width: 100px;
height: 100px;
@include bg_img('~assets/images/bg1', 'png');
}