将两个SCSS background@mixin组合到一个样式规则中

我有两个SCSS@mixin，在一起调用时，我希望将它们合并为一个CSS背景规则：

@mixin linear-gradient($color-stop-1, $color-stop-2) {
    background: linear-gradient($color-stop-1, $color-stop-2);
}

@mixin bg-img($img, $bg-repeat: no-repeat, $bg-pos: 0 0, $bg-color: transparent) {
    background: url('#{$path--rel}/#{$img}') $bg-repeat $bg-pos $bg-color;
}

我可以将它们组合成一个长@mixin，但它们将分别在项目中重用

我想制作这个CSS：

background: linear-gradient(#009fe1, #3acec2), url(../img/bg.jpg) no-repeat center bottom transparent;

目前我正在调用两个@mixin：

@include linear-gradient($cerulean, $turquoise);
@include bg-img('bg.jpg', no-repeat, center bottom);

产生的输出CSS（如预期）：

---

可以使用一个函数来组合两个@mixin或任何其他简单的方法来加入吗？

为什么不创建一个后台mixin，它可以根据您提供的输入输出所有3个场景

---

你为什么不创建一个后台混音器，根据你的输入输出所有3个场景？@EdmundReed你有一个示例片段吗？请参阅我发布的回答谢谢@Edmund Reed对我有用（很好的片段）。如果SASSYSCS能够以某种方式调用单独的mixin+=combine，那就冷静点。如果Sass的这一功能能够实现，那么它应该是可能的：

background: linear-gradient(#009fe1, #3acec2);
background: url(../img/bg.jpg) no-repeat center bottom transparent;

$path--rel: '..';

@mixin background($custom: ()) {

  $options: map-merge((
    'gradient': null,
    'image': null,
    'bg-repeat': no-repeat,
    'bg-position': 0 0,
    'bg-color': transparent
  ), $custom);

  // we have passed both gradient and image
  @if map-get($options, 'gradient') and map-get($options, 'image') {
    background: 
      linear-gradient(map-get($options, 'gradient')), 
      url('#{$path--rel}/#{map-get($options, 'image')}') 
      map-get($options, 'bg-repeat')  
      map-get($options, 'bg-position') 
      map-get($options, 'bg-color');
  }

  // we have passed just gradient
  @else if map-get($options, 'gradient') {
    background: linear-gradient(map-get($options, 'gradient'));
  }

  // we have passed just image
  @else if map-get($options, 'image') {
      background: 
        url('#{$path--rel}/#{map-get($options, 'image')}') 
        map-get($options, 'bg-repeat')  
        map-get($options, 'bg-position') 
        map-get($options, 'bg-color');
  }
}


// USAGE


// Gradient
.foo {
  @include background((
    'gradient': (#009fe1, #3acec2)
  ));
  // OUTPUT: background: linear-gradient(#009fe1, #3acec2);
}

// Image
.bar {
  @include background((
    'image': 'bg.jpg'
  ));
  // OUTPUT: background: url("../bg.jpg") no-repeat 0 0 transparent;
}

// Both
.fizz {
  @include background((
    'gradient': (#009fe1, #3acec2),
    'image': 'bg.jpg',
    'bg-position': center bottom
  ));
  // OUTPUT: background: linear-gradient(#009fe1, #3acec2), url("../bg.jpg") no-repeat center bottom transparent;
}