Css 创建一个相对路径mixin,使用较少的

Css 创建一个相对路径mixin,使用较少的,css,less,Css,Less,我有一堆svg作为背景图片。我正在寻找一种方法,用一个变量创建一个部分路径,然后只将文件名传递到我的mixin中。大概是这样的: @url: "url('../images/icons/_mm/"; .bg(@fileName){ background-image:@url @fileName; background-size: contain; background-repeat: no-repeat; background-position: center center; } .mmWra

我有一堆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');
}
不幸的是,这不能正确连接。当我传入这样的论点时:

@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}');
}

这是我所知道的减少使用的唯一方法。希望这有帮助

绝对完美!非常感谢!这真是节省时间!