sass - 如何在数据 :image string? 中使用 sass 字符串替换

Question

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

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

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

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

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

@function str-replace($string, $search, $replace: '') {
  $index: str-index($string, $search);
  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }
  @return $string;
}

$wm-black : #202020;

.modal-close {
  &:before {
    background: {
      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>');
      repeat: no-repeat;
      position: calc(100% - 25px) 25px;
      size: 36px 36px;
      color: rgba(#000,.95);
    }
    opacity: 1;
    transition: opacity .25s ease;
    content: '';
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 99;
  }
}

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

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

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

错误代码。

Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: $string: #202020 is not a string.
  ╷
4 │   $index: str-index($string, $search);
  │           ^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src/scss/_functions.scss 4:11  str-replace()

谢谢

---

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

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

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>');
}