Question

我正在尝试在Sass中创建一个mixin，以便在div上的svg图像中从上到下获得渐变线性。

首先，我尝试使用这样的线性渐变混合：

@mixin linear-gradient($fromColor, $toColor) {
  background-color: $toColor;
  background-image: -webkit-gradient(linear, left top, left bottom, from($fromColor), to($toColor));
  background-image: -webkit-linear-gradient(top, $fromColor, $toColor);
  background-image:    -moz-linear-gradient(top, $fromColor, $toColor);
  background-image:     -ms-linear-gradient(top, $fromColor, $toColor);
  background-image:      -o-linear-gradient(top, $fromColor, $toColor);
  background-image:         linear-gradient(top, $fromColor, $toColor);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#{$fromColor}', EndColorStr='#{$toColor}');
}

然后我在代码中使用它并多次尝试没有成功：

.class { @include background(url("../img/cryptocurrency.svg") no-repeat, linear-gradient(#5BFE77, #00B807)); }

然后，

.class { @include linear-gradient(#5BFE77, #00B807), url("../img/cryptocurrency.svg") no-repeat; }

最后，

.class { @include linear-gradient(#5BFE77, #00B807); background: url("../img/cryptocurrency.svg") no-repeat; }

没有任何效果。所以我开始浏览网页（甚至在Stackoverflow上），我试图在我的工具集上添加Bourbon mixin（我没有安装Bourbon或Compass）：

@mixin background-image($images...) {
  $webkit-images: ();
  $spec-images: ();

  @each $image in $images {
    $webkit-image: ();
    $spec-image: ();

    @if (type-of($image) == string) {
      $url-str:       str-slice($image, 1, 3);
      $gradient-type: str-slice($image, 1, 6);

      @if $url-str == "url" {
        $webkit-image: $image;
        $spec-image:   $image;
      }

      @else if $gradient-type == "linear" {
        $gradients: _linear-gradient-parser($image);
        $webkit-image:  map-get($gradients, webkit-image);
        $spec-image:    map-get($gradients, spec-image);
      }

      @else if $gradient-type == "radial" {
        $gradients: _radial-gradient-parser($image);
        $webkit-image: map-get($gradients, webkit-image);
        $spec-image:   map-get($gradients, spec-image);
      }
    }

    $webkit-images: append($webkit-images, $webkit-image, comma);
    $spec-images:   append($spec-images,   $spec-image,   comma);
  }

  background-image: $webkit-images;
  background-image: $spec-images;
}

+

@mixin linear-gradient($pos, $g1, $g2: null,
                       $g3: null, $g4: null,
                       $g5: null, $g6: null,
                       $g7: null, $g8: null,
                       $g9: null, $g10: null,
                       $fallback: null) {
  // Detect what type of value exists in $pos
  $pos-type: type-of(nth($pos, 1));
  $pos-spec: null;
  $pos-degree: null;

  // If $pos is missing from mixin, reassign vars and add default position
  @if ($pos-type == color) or (nth($pos, 1) == "transparent")  {
    $g10: $g9; $g9: $g8; $g8: $g7; $g7: $g6; $g6: $g5;
    $g5: $g4; $g4: $g3; $g3: $g2; $g2: $g1; $g1: $pos;
    $pos: null;
  }

  @if $pos {
    $positions: _linear-positions-parser($pos);
    $pos-degree: nth($positions, 1);
    $pos-spec:   nth($positions, 2);
  }

  $full: $g1, $g2, $g3, $g4, $g5, $g6, $g7, $g8, $g9, $g10;

  // Set $g1 as the default fallback color
  $fallback-color: nth($g1, 1);

  // If $fallback is a color use that color as the fallback color
  @if (type-of($fallback) == color) or ($fallback == "transparent") {
    $fallback-color: $fallback;
  }

  background-color: $fallback-color;
  background-image: -webkit-linear-gradient($pos-degree $full); // Safari 5.1+, Chrome
  background-image: unquote("linear-gradient(#{$pos-spec}#{$full})");
}

然后我修改了我的代码与文档所说的相比：

.class { @include background-image(url("../img/cryptocurrency.svg"), linear-gradient(white 0, yellow 50%, transparent 50%)); }

因此没有任何作用。

这是我的编译器显示的错误。如果有人想要Backtrace随意问。

Error: $map: "_linear-gradient-parser(linear-gradient(white 0, yellow 50%, transparent 50%))" is not a map for `map-get' on line 120 of /Library/WebServer/Documents/eureka/template/css/mixins.scss, in `background-image' from line 331 of /Library/WebServer/Documents/eureka/template/css/main.scss from line 13 of /Library/WebServer/Documents/eureka/template/css/layout.scss Use --trace for backtrace.

TL; DR：我正在寻找支持背景图片网址的自定义mixin，以便在渐变后面显示图片。

非常感谢帮助。

[编辑] 1：我没有安装Bourbon或指南针。我复制了他们的Github Background Image和Linear Gradient粘贴的mixin代码。我不想安装任何一个。我只是在寻找一个可以在渐变和背景图像上都能正常工作的自定义mixin。

[编辑] 2：在这个帖子中，我正在解释我试图实现目标的人。这并不意味着我想使用Bourbon的代码甚至指南针。我的意思是我正在寻找一个有效的mixin（自定义）。我没有任何线索在网上搜索。我唯一的答案是关于Bourbon和Compass，这就是我试图复制粘贴代码的原因。

Sass Mixin线性渐变与图像（网址）

0 个答案: