title: Combine two SCSS background @mixin into the one style rule
body: <p>I have two SCSS @mixins that I would like to combine into the one CSS background rule when called together:</p>
  
  <pre><code>@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;
  }
  </code></pre>
  
  <p>I could combine them into one long @mixin but they both will be reused in the project separately.</p>
  
  <p>I want to have this CSS produced:</p>
  
  <pre><code>background: linear-gradient(#009fe1, #3acec2), url(../img/bg.jpg) no-repeat center bottom transparent;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/m9SQ3.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/m9SQ3.jpg" alt="enter image description here"></a></p>
  
  <p>Currently I am calling the two @mixins:</p>
  
  <pre><code>@include linear-gradient($cerulean, $turquoise);
  @include bg-img('bg.jpg', no-repeat, center bottom);
  </code></pre>
  
  <p>Output CSS produced (as expected):</p>
  
  <pre><code>background: linear-gradient(#009fe1, #3acec2);
  background: url(../img/bg.jpg) no-repeat center bottom transparent;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/eSXtc.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eSXtc.jpg" alt="enter image description here"></a></p>
  
  <p>Can a function be used to combine the two @mixins or any other simple method to join?</p>