将两个 SCSS 背景 @mixin 合并到一个样式规则中

Question

我有两个 SCSS @mixins，我想在一起调用时将它们组合成一个 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;

目前我正在调用这两个@mixins：

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

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

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

可以用一个函数把两个@mixins或者其他简单的方法结合起来吗？

Answer 1

你为什么不创建 1 个背景 mixin，它可以根据你给它的输入输出所有 3 个场景？

https://codepen.io/esr360/pen/LLKKvR?editors=1102

$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;
}