Странный символ, добавляющийся в SCSS @mixin - PullRequest
Новая
       3

Странный символ, добавляющийся в SCSS @mixin

0 голосов
/ 16 мая 2018

В следующем сценарии мне нужно поддерживать как можно больше браузеров.

Я создаю 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),).

1 Ответ

0 голосов
/ 16 мая 2018

Хотя я не совсем уверен, почему ваши значения переносятся в (), вы можете использовать функцию 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);
...