Sass/scss 多个 mixins 组合样式

Question

我有一个（好吧，真的有几个）Sass mixin 来设置渐变背景（具有向后兼容性等等）。现在，我有一个元素，我想对其应用多个渐变。我可以通过使用逗号分隔列表设置背景属性来直接执行此操作，但如果我可以使用渐变混合的多个应用程序来应用多个渐变并将属性输出为一个通用的分隔列表。

我想做的事的一个例子：

div.needs-two-backgrounds {
  @include gradient-mixin(90deg, $color-one 0, $color-two 100%);
  @include gradient-mixin(180deg, $color-three 0, $color-four 20%, $color-five 100%);
}

哪个会（基本上）发出这个

div.needs-two-backgrounds {
  background-image: linear-gradient(90deg, $color-one 0, $color-two 100%),
                    linear-gradient(180deg, $color-three 0, $color-four 20%, $color-five 100%);
}

Sass 中是否有某种内置的方法可以做到这一点，或者它是否需要一个单独的库，或者这对语言来说是不可能的？

编辑： 我根据答案构建了一个解决方案，并认为我会分享它。

@function linear-gradient-x($direction, $stops...) {
  @return linear-gradient($direction, $stops);
}

@function prefixed-background-image-list-x($prefix, $images) {
  $ret-val: ();

  @each $image in $images {
    $prefixed-image: #{$prefix}$image;
    $ret-val: append($ret-val, $prefixed-image, 'comma');
  }

  @return $ret-val;
}

@mixin background-image-x($backgrounds...) {
  background-image: prefixed-background-image-list-x("-moz-", $backgrounds);
  background-image: prefixed-background-image-list-x("-webkit-", $backgrounds);
  background-image: prefixed-background-image-list-x("-o-", $backgrounds);
  background-image: prefixed-background-image-list-x("ms-", $backgrounds);
  background-image: prefixed-background-image-list-x("", $backgrounds);
}

如答案中建议的那样使用：

div.needs-two-backgrounds {
  @include background-image-x(
    linear-gradient-x(90deg, $color-one 0, $color-two 100%),
    linear-gradient-x(180deg, $color-three 0, $color-four 20%, $color-five 100%)
  );
}

希望这对某人有所帮助。

Answer 1

按照你描述的方式是不可能的，但是像这样的东西是可能的。

div.needs-two-backgrounds {
    @include background-image(
        gradient(90deg, $color-one 0, $color-two 100%),
        gradient(180deg, $color-three 0, $color-four 20%, $color-five 100%)
    );
}

然后您必须创建一个支持可变参数的混入 background-image – 注意三个点：

@mixin background-image($images...) {
    // do stuff here
}

然后 gradient-mixin 应该用 gradient 函数替换 by/extended。关于如何完成这一切的一个很好的起点是 Compass 项目的 background-image mixin：

https://github.com/Compass/compass/blob/stable/core/stylesheets/compass/css3/_images.scss#L97

Sass/scss 多个 mixins 组合样式

Sass/scss multiple mixins combining styles

sass

mixins