带有 SVG 图像数据 URI 的背景图像中的 SCSS 变量

在下面的SCSS中，我想使用fg-color内的变量url background-image属性。

$fg-color: #ff6464;

i.icon-back {
  background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='%23ff6464'/></svg>");
}

目前，变量的值只是在 SVG 字符串中重复，如下所示：

fill='%23ff6464'

我希望每当fg-color变量已更新。

我怎样才能做到这一点？

UPDATE:

此输入 SCSS：

i.icon-back {
  background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='$fg-color'/></svg>");
}

输出这个CSS：

i.icon-back {
  background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='$fg-color'/></svg>");
}

...它是完全相同的 - 变量没有被处理。

NOTE:

我回顾了这些问题，它们看起来相似，但并不相同：

• 从 SCSS 创建数据 URI https://stackoverflow.com/q/22323021/194982
• 使用数据 URI SVG 作为 CSS 背景图像 https://stackoverflow.com/q/13742934/194982

首先，创建一个 SASS 函数。 这（ab）使用字符串插值将颜色转换为字符串， 然后删除第一个字符（应始终为 '#'）， 并把 '%23' 代替（' 的 URL 编码形式#').

@function url-friendly-colour($colour) {
    @return '%23' + str-slice('#{$colour}', 2, -1)
}

然后使用该函数 - 但为了让它在字符串中工作，它must进行插值，使用#{}

i.icon-back {
  background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='#{url-friendly-colour($fg-color)}'/></svg>");
}

当然，这种方法的警告是它不适用于颜色 由颜色名称而不是十六进制颜色指定。

E.g. #f00有效但是red将不会。