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语法