如何将非字符串变量转换为字符串中较少的？

Question

我有一个像下面这样的混合器，它提供了一个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，并使用替换方法将' url (‘和’‘)分割掉，但是似乎没有办法将url param转换成字符串，至少我还没有找到。

Answer 1

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

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

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

当通过将虚拟SVG文件放置在所需文件夹中来编译上述代码时，它会生成以下CSS：(这是用--no-ie-compat编译的)

.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");
}

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

<svg viewBox='0 0 100 100'>
  <circle cx='0' cy='0' r='50' stroke="#000000"/>
</svg>