less函数传参和字符串拼接

在vue项目中,组件中使用的是less语法,当写成这种样式是,图片在network中可以正常获取到,但是无法显示在页面上

.bg-image(@imageName){
    background-image: url("./@{imageName}.png");
}

> .icon{
    display: inline-block;
    width: 25px;
    height: 24px;
    background-size: cover;
    &.icon0{
        .bg-image('glod')
    }
    &.icon1{
        .bg-image('silver')
    }
    &.icon2{
        .bg-image('copper')
    }
}

将上面的样式改成如下,成功显示图片:

  .bg-image(@imageName){
    background-image: ~"url(./@{imageName}.png)";
  }

注意:less中参数需使用@,使用时需使用   @{变量名}使用

你可能感兴趣的:(前端)