使用LESS创建相对路径mixin

时间:2013-02-07 20:19:48

标签: 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;
}

不幸的是,这并没有正确连接。当我传递这样的论点时:

.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编译器会抛出错误。我知道答案可能涉及逃避〜字符串,但我完全没有想法。任何人都可以帮忙吗?提前致谢!

1 个答案:

答案 0 :(得分:2)

要做类似的事情,你必须求助于字符串插值..

@image_dir: '../images/';

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

这是我知道使用LESS的唯一方法。希望这有帮助!