附加到 SCSS @mixin 的奇怪字符

Question

在以下场景中，我需要支持尽可能多的浏览器。

我正在构建一个 SCSS @mixin，它在 background-image 前面加上供应商前缀，但还会监听 linear-gradient 是否被声明，如果是，那么也加上前缀。

我的代码如下所示：

@function str-coerce($string) {
  @return inspect($string);
}

@function str-replace($string, $find, $replace: "") {
  $index: str-index($string, $find);

  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($find)), $find, $replace);
  }

  @return $string;
}

@mixin background-image($values...) {
  $vendors: (-webkit-, -moz-, -o-);

  @each $vendor in $vendors {
    $string: str-coerce($values);

    @if (str-index($string, "linear-gradient")) {
    $string: str-replace($string, "linear-gradient", #{$vendor + "linear-gradient"});

    @if (str-index($vendor, "-o-")) {
      $vendor: str-replace($vendor, "-o-");
    }

    #{$vendor + "background-image"}: $string;
    } @else {

      @if not (str-index($vendor, "-o-")) {
        #{$vendor + "background-image"}: $values;
      }
    }
  }

  background-image: $values;
}

用法和输出如下所示：

// usage
.foo {
  @include background-image(url("../example.svg"));
}
.bar {
  @include background-image(linear-gradient(45deg, red, blue));
}

// output
.foo {
  -webkit-background-image: url("../example.svg");
  -moz-background-image: url("../example.svg");
  background-image: url("../example.svg");
}
.bar {
  -webkit-background-image: (-webkit-linear-gradient(45deg, red, blue),);
  -moz-background-image: (-moz-linear-gradient(45deg, red, blue),);
  background-image: (-o-linear-gradient(45deg, red, blue),);
  background-image: linear-gradient(45deg, red, blue);
}

我的问题是，我的类型强制中出了什么问题，导致我的 linear-gradient 供应商前缀被括在括号中并后跟逗号？例如(-moz-linear-gradient(45deg, red, blue),).

Answer 1

虽然我不完全确定您的值为何被包装在 () 中，但您可以使用 str-replace 函数来删除它们。

要删除领先的(，请将您的str-replace 函数更新为：

@function str-replace($string, $search, $replace: '') {
  $index: str-index($string, $search);

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

  @return $string;
}

然后更新此行以删除尾随的),

  #{$vendor + "background-image"}:  str-slice($string, 1, -3);