我有一堆svg作为背景图像。我正在寻找一种方法,用一个变量创建一个部分路径,然后只将文件名传递到我的mixin中。类似这样的东西:
@url: "url('../images/icons/_mm/";
.bg(@fileName){
background-image:@url @fileName;
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
不幸的是,这没有正确连接。当我传入这样一个论点时:
.mmWrap{
.bg('swoosh.svg');
}
生成的css是这样的:
.mmWrap {
background-image: "url('../images/icons/_mm/" 'swoosh.svg';
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
一团糟。如果我试图传递不带引号的参数,LESS编译器会抛出一个错误。我知道答案可能涉及escape字符串,但我完全没有主意。这里有人能帮忙吗?提前感谢!
要做到这一点,必须使用字符串插值。。
@image_dir: '../images/';
.bg(@filename) {
background-image: url('@{image_dir}@{filename}');
}
这是我所知道的使用LESS的唯一方法。希望这能有所帮助!