在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);