3

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

我正在构建一个以供应商前缀为前缀的 SCSS @mixin，background-image但还会监听linear-gradient是否声明了 a ，如果是，则也为其添加前缀。

我的代码如下所示：

@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),)。

4

1 回答 1

2

虽然我不完全确定为什么您的值被包装在 中()，但您可以使用该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);
于 2018-05-16T00:15:16.040 回答