_background-image.scss

//************************************************************************//
// Background-image property for adding multiple background images with
// gradients, or for stringing multiple gradients together.
//************************************************************************//

@mixin background-image($images...) {
  background-image: add-prefix($images, webkit);
  background-image: add-prefix($images);
}

@function add-prefix($images, $vendor: false) {
  @debug $images;
  $images-prefixed: ();
  $gradient-positions: false;

  @for $i from 1 through length($images) {
    $type: type-of(nth($images, $i)); // Get type of variable - List or String

    // If variable is a list - Gradient
    @if $type == list {
      $gradient-type: nth(nth($images, $i), 1); // Get type of gradient (linear || radial)
      $gradient-pos: null;
      $gradient-args: null;

      @if $gradient-type == linear {
        $gradient-pos:  nth(nth($images, $i), 2); // Get gradient position
        $gradient-args: nth(nth($images, $i), 3); // Get actual gradient (red, blue)
      }
      @else {
        $gradient-args: nth(nth($images, $i), 2); // Get actual gradient (red, blue)
      }

      @if ($gradient-pos) and ($gradient-type == linear) and (type-of($gradient-pos) != color) and (type-of($gradient-pos) != number) {
        @debug "happing";
        $gradient-positions: calc-gradient-positions($gradient-pos);
      }

      $gradient: render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor);
      $images-prefixed: append($images-prefixed, $gradient, comma);
    }

    // If variable is a string - Image
    @else if $type == string {
      $images-prefixed: join($images-prefixed, nth($images, $i), comma);
    }
  }
  @return $images-prefixed;
}

//Examples:
  //@include background-image(linear-gradient(top, orange, red));
  //@include background-image(radial-gradient(50% 50%, cover circle, orange, red));
  //@include background-image(url("/images/a.png"), linear-gradient(orange, red));
  //@include background-image(url("image.png"), linear-gradient(orange, red), url("image.png"));
  //@include background-image(linear-gradient(hsla(0, 100%, 100%, 0.25) 0%, hsla(0, 100%, 100%, 0.08) 50%, transparent 50%), linear-gradient(orange, red));