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');
}

  

上一篇:基于UDP协议的socket通信


下一篇:数据结构+算法面试100题~~~摘自CSDN