我有一堆 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 编译器会抛出错误。我知道答案可能涉及转义 ~ 字符串,但我完全没有想法。有人可以帮忙吗?提前致谢!
最佳答案
要执行类似的操作,您必须求助于字符串插值......
@image_dir: '../images/';
.bg(@filename) {
background-image: url('@{image_dir}@{filename}');
}
这是我所知道的使用 LESS 的唯一方法。希望这对您有所帮助!
关于css - 使用 LESS 创建相对路径混合,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14760243/