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

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

$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变量时都会自动更新.

我怎样才能做到这一点？

更新：

此输入SCSS：

i.icon-back {
  background-image: url("data:image/svg+xml;charset=utf-8,0z' fill='$fg-color'/></svg>");
}

输出此CSS：

i.icon-back {
  background-image: url("data:image/svg+xml;charset=utf-8,0z' fill='$fg-color'/></svg>");
}

……它完全相同 – 不处理变量.

注意：

我已经回顾了这些看似相似的问题,但不一样：

> Creating a Data URI’s from SCSS
> Using an Data URI SVG as a CSS background image

解决方法

首先,创建一个SASS功能.
这个(ab)使用字符串插值将颜色转换为字符串,
然后剥去第一个字符(应该总是’#’),
并将’#’放在其位置(URL编码形式为’#’).

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

然后使用函数 – 但是为了使它在字符串中工作,必须使用#{}进行插值.

i.icon-back {
  background-image: url("data:image/svg+xml;charset=utf-8,0z' fill='#{url-friendly-colour($fg-color)}'/></svg>");
}

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

例如. #f00有效但红色不会.