Question

我有一个（很好，真的很少）Sass mixins来设置渐变背景（具有向后兼容性和不具备的功能）。现在，我有一个元素，我想要应用多个渐变。我可以通过使用逗号分隔列表设置background属性来直接执行此操作，但是如果我可以使用渐变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%)
    );
}

然后你必须创建一个支持变量参数的mixin background-image - 注意三个点：

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

gradient-mixin应该被gradient函数替换为/ {extended}。关于如何做到这一切的一个很好的起点是指南针项目的background-image混合：

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

Sass / scss多种mixins组合风格

1 个答案: