less mixins需要创建一个方法，用到字符串拼接，一直报错，求指点

Question

想用less写一个方法，判断在不同 dppx 下显示不同的 png 图片，我是这样写的：

@charset 'utf-8';

@ext: '.png';
@png2x: '@2x';
@png3x:'@3x';
.bg-image(@url, @ext, @png2x, @png3x){
      background-image: url("@{url}@{png2x}@{ext}");
      @media (min-resolution: 3dppx){
            background-image: url("@{url}@{png3x}@{ext}");
      }
}

这个方法一直报错，编译不通过。
img,url 想象中应该是这样显示的：

 background-image: url(@url + "@2x" + @ext)

但是在 less 中不能这样写，请问 @url + "@2x" + @ext 如果拼接成上面的字符串，应该怎么写呢？

Answer 1

// 根据屏幕大小显示不同的图片
.bg-image-2x(@url, @imgSize2x:"@2x",@ext:".png") { 
      background-image: url("@{url}@{imgSize2x}@{ext}"); 
};
.bg-image-3x(@url, @imgSize3x:"@3x",@ext:".png") { 
      background-image: url("@{url}@{imgSize3x}@{ext}"); 
};
.bg-image(@url){
      .bg-image-2x(@url);
      @media (min-resolution: 3dbpx){
            .bg-image-3x(@url); 
      }
};

终于搞出来了，这样可以。