如何在数据中使用sass字符串替换:图像字符串？

Question

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

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

我正在尝试用url编码的#替换我的彩色vars十六进制%23。

我不认为堆栈片段适用于SASS，但在小提琴中得到了相同的结果。

您可以在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风暴中，字符串参数var不工作，因为它应该是无效的。

​

​

我的代码目前无法编译，所以有些东西在运行，但不确定为什么str-替换函数不会在这里返回。

错误代码。

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

Answer 2

谢谢@MiguelPynto的回答，这是我目前使用的解决方案，但原则相同。

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