SCSS-Mixin SVG 适用于颜色关键字，但不适用于十六进制颜色或变量

Question

使用颜色变量或十六进制颜色代码的 Mixin 不起作用，但可以使用颜色常量

在 React 中尝试使用 webpack 开发服务器和 babel，也在 codepen 中 https://codepen.io/wfpjwporefow/pen/bGbPoEL

@mixin telegram-mixin($color) {
  background-image: url('data:image/svg+xml;utf8,<svg fill="#{$color}" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><path d="M18.384,22.779c0.322,0.228 0.737,0.285 1.107,0.145c0.37,-0.141 0.642,-0.457 0.724,-0.84c0.869,-4.084 2.977,-14.421 3.768,-18.136c0.06,-0.28 -0.04,-0.571 -0.26,-0.758c-0.22,-0.187 -0.525,-0.241 -0.797,-0.14c-4.193,1.552 -17.106,6.397 -22.384,8.35c-0.335,0.124 -0.553,0.446 -0.542,0.799c0.012,0.354 0.25,0.661 0.593,0.764c2.367,0.708 5.474,1.693 5.474,1.693c0,0 1.452,4.385 2.209,6.615c0.095,0.28 0.314,0.5 0.603,0.576c0.288,0.075 0.596,-0.004 0.811,-0.207c1.216,-1.148 3.096,-2.923 3.096,-2.923c0,0 3.572,2.619 5.598,4.062Zm-11.01,-8.677l1.679,5.538l0.373,-3.507c0,0 6.487,-5.851 10.185,-9.186c0.108,-0.098 0.123,-0.262 0.033,-0.377c-0.089,-0.115 -0.253,-0.142 -0.376,-0.064c-4.286,2.737 -11.894,7.596 -11.894,7.596Z"/></svg>');
}

$light-highlight: #283044;

// works
.icon {
  @include telegram-mixin(red);
}

// does not work
.icon {
  @include telegram-mixin($light-highlight);
}

// does not work
.icon {
  @include telegram-mixin(#ffffff);
}

我想使用 mixin 以特定颜色设置 svg 背景。仅适用于红色，蓝色，黑色等颜色常量...... 我没有收到任何错误消息，我的 linter 很开心，svg 只是不可见。

Answer 1

您的哈希需要像这样编码：

.icon {
  @include telegram-mixin("%23ffffff");
}

就是说，您应该对整个内容进行编码。并非所有浏览器都可以读取未编码的内联数据 URI，因此对其进行编码可确保跨浏览器兼容性。这是一个将编码的网站： https://yoksel.github.io/url-encoder/

您还可以通过 Sass 函数进行编码。这是一个例子：https://codepen.io/sodapop/pen/PKMwyN

SCSS-Mixin SVG 适用于颜色关键字，但不适用于十六进制颜色或变量

SCSS-Mixin SVG works with color keyword, but not with hex-color or variable

svg

sass

scss-mixins