less函数传参和字符串拼接
在vue项目中,组件中使用的是less语法,当写成这种样式是,图片在network中可以正常获取到,但是无法显示在页面上.bg-image(@imageName){background-image: url("./@{imageName}.png");}> .icon{display: inline-block;width: 25px;he...
·
在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中参数需使用@,使用时需使用 @{变量名}使用
更多推荐
已为社区贡献14条内容
所有评论(0)