1.首先创建mixin.styl文件代码如下:
bg-image($url) // 创建bg-image($url)函数
background-image: url($url + "@2x.png")
@media(-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
background-image: url($url + "@3x.png")
2.编写html代码
<div class="title">
<span class="brand"></span>
<span class="name"></span>
</div>
<style lang="stylus" rel="stylesheet/stylus">
@import "../../common/stylus/mixin.styl" //引用mixin.styl文件
.brand
display: inline-block
width: 30px
height: 18px
bg-image('brand') // 使用bg-image($url)函数 $url为变量:brand
background-size: 30px 18px
background-repeat: no-repeat
</style>
注释
bg-image('brand')中 brand为/header/brang.@2x.png || brang.@3x.png的图片名
/header/brang.@2x.png || brang.@3x.png为文件路径
此处使用stylus语法