如何在 data:image 字符串中使用 sass 字符串替换？

Question

我正在使用CSS 技巧中提到的字符串替换

\n\n

但我正在尝试在背景图像data:image/svg+xml字符串中进行字符串替换

\n\n

我正在尝试#用 url 编码替换我的颜色变量之一%23。

\n\n

我不认为堆栈片段适用于 SASS 但在jsfiddle中得到相同的结果。

\n\n

您可以在 sassmeister 中更好地看到 css 输出https://www.sassmeister.com/gist/7cf11bf6f3ee4951cf67e0e6074d1d67

\n\n

\r\n

\r\n

@function str-replace($string, $search, $replace: \'\') {\r\n  $index: str-index($string, $search);\r\n  @if $index {\r\n    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);\r\n  }\r\n  @return $string;\r\n}\r\n\r\n$wm-black : #202020;\r\n\r\n.modal-close {\r\n  &:before {\r\n    background: {\r\n      image: url(\'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 320 512"><style>.a{fill:%23\' + str-replace( $wm-black, \'#\', \'%23\' ) + \'}</style><path class="a" d="M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z"/></svg>\');\r\n      repeat: no-repeat;\r\n      position: calc(100% - 25px) 25px;\r\n      size: 36px 36px;\r\n      color: rgba(#000,.95);\r\n    }\r\n    opacity: 1;\r\n    transition: opacity .25s ease;\r\n    content: \'\';\r\n    display: block;\r\n    position: fixed;\r\n    top: 0;\r\n    right: 0;\r\n    left: 0;\r\n    bottom: 0;\r\n    z-index: 99;\r\n  }\r\n}

\r\n

<button class="modal-close"></button>

\r\n

\r\n

\r\n

\n\n

在 PHP Storm 中，字符串参数 var 无法正常工作，因此无效。

\n\n

\n\n

我的代码当前无法编译，因此出现了问题，但不确定为什么 str-replace 函数不会在此处返回。

\n\n

错误代码。

\n\n

Module build failed (from ./node_modules/css-loader/index.js):\nModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):\nSassError: $string: #202020 is not a string.\n  \xe2\x95\xb7\n4 \xe2\x94\x82   $index: str-index($string, $search);\n  \xe2\x94\x82           ^^^^^^^^^^^^^^^^^^^^^^^^^^^\n  \xe2\x95\xb5\n  src/scss/_functions.scss 4:11  str-replace()\n

\n\n

谢谢

\n\n

---

\n\n

更新：我也尝试过这种方法，语法看起来更好，但仍然无法编译。

\n\n

\n\n

查看它在 Sassmeister 中的编译... https://www.sassmeister.com/gist/c9569c0373b52f0a9b3f8ae07860f8af

\n

Answer 1

对颜色值进行插值并将其转换为字符串：

#{str-replace('' + $wm-black, '#', '%23')}

用法示例...

$wm-black : #202020;

.bg-svg {
  background-image: url('data:image/svg+xml;utf8,<svg><style>.a{fill:#{str-replace('' + $wm-black, '#', '%23')};}</style></svg>');
}