css预编译语言sass——mixin的使用

以根据不同屏幕吃寸动态应用背景图片为例

新建一个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');
}