SCSS。 Chrome 中的“#”弃用答案

【问题标题】：SCSS. "#" deprecation in ChromeSCSS。 Chrome 中的“#”弃用
【发布时间】：2018-12-10 19:28:45
【问题描述】：

我在 index.scss 中使用了类似的东西：

.some-class {
  content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'><path d='M15.477 ... 50.836z' fill='#{$text-muted}'/><path d='M45.3 ... 10h6.1z' fill='#{$text-muted}'/></svg>");
}

但 Chrome 对我说：

[Deprecation] Using unescaped '#' characters in a data URI body is deprecated and will be removed in M68, around July 2018. Please use '%23' instead. See https://www.chromestatus.com/features/5656049583390720 for more details.

【问题讨论】：

如果您访问URL，Chrome 会提供它告诉您它被弃用的原因。
我知道原因。我在问用 sass 做什么。

标签： google-chrome sass scss-lint scss-mixins

【解决方案1】：

您可以使用 str-replace 将 # 替换为 %23。

.some-class {
   $urlString: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'><path d='M15.477 ... 50.836z' fill='#{$text-muted}'/><path d='M45.3 ... 10h6.1z' fill='#{$text-muted}'/></svg>");
   content: str-replace($urlString, "#", "%23");
}

【讨论】：