css - 使用 LESS 创建相对路径 mixin

Question

我有一堆 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 编译器会抛出错误。我知道答案可能涉及转义 ~ 字符串，但我完全没有想法。任何人都可以在这里帮忙吗？提前致谢！

Answer 1

要做这样的事情，你必须求助于字符串插值..

@image_dir: '../images/';

.bg(@filename) {
    background-image: url('@{image_dir}@{filename}');
}

这是我知道使用 LESS 的唯一方法。希望这可以帮助！