0

想用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 如果拼接成上面的字符串,应该怎么写呢?

2019-05-10 提问
1 个回答
0
// 根据屏幕大小显示不同的图片
.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); 
      }
};

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

撰写答案

推广链接