如何在Less？

Question

我有一个如下所示的mixin，它提供background-image: <white version of black svg image>;

.foo(@img-url) {
    @encoded-black: escape("#000000");
    @encoded-white: escape("#ffffff");
    @data-uri: data-uri("image/svg+xml;charset=UTF-8", "@{img-url}");
    @new-uri: replace("@{data-uri}", "@{encoded-black}", "@{encoded-white}");
    background-image:e(@new-uri);
}

我想按如下方式使用它：

.myClass {
    .foo(url('../../myImg.svg'));
}

但只有在按如下方式使用时才有效：

.myClass {
    .foo('../../myImg.svg');
}

我想接受带有url部分的param，然后使用replace方法切掉'url（'和'）'但似乎没有办法将url param转换为字符串，至少不是我找到了。

Answer 1

实际上不需要将url()参数单独转换为字符串。您可以在replace()函数本身内直接执行此操作。

在下面的代码中，"@{img-url}"会将输入值作为字符串，然后使用正则表达式可以删除url()。剥离必须在使用data-uri()函数之前完成，并且剥离的值应该作为输入传递给它，因为data-uri()函数只需要一个路径而且它不需要（或不应该）在{ {1}}格式。

url()

当通过在所需文件夹中放置一个虚拟SVG文件来编译上面的代码时，它会产生以下CSS :(这是用.foo(@img-url) { @encoded-black: escape("#000000"); @encoded-white: escape("#ffffff"); @img-url-new: replace("@{img-url}", "url\('(.+)'\)", '$1'); @data-uri: data-uri("image/svg+xml;charset=UTF-8", '@{img-url-new}'); @new-uri: replace("@{data-uri}", "@{encoded-black}", "@{encoded-white}"); background-image: e(@new-uri); } .myClass { .foo(url('../../myImg.svg')); } 编译的）

--no-ie-compat

以下是虚拟SVG文件的内容仅供参考：

.myClass {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20viewBox%3D'0%200%20100%20100'%3E%0D%0A%09%3Ccircle%20cx%3D'0'%20cy%3D'0'%20r%3D'50'%20stroke%3D%22%23ffffff%22%2F%3E%0D%0A%3C%2Fsvg%3E");
}