CSS - SASS:使用基于@each的mixins生成多个背景

Question

我正在使用CSS来创建发型和颜色的目录.我有55种不同颜色和发型的组合.每种发型和颜色都有自己的图像SVG文件,我需要将它们全部组合成一个背景(使用CSS3的多重背景功能).

我写了这个混合来生成多个背景:(这是基于这篇文章中的mixin )

@mixin style-matrix($colors, $styles) {
    @each $s in $styles {
        @each $c in $colors {


                url("pps#{$s}#{$c}.svg"),
        }
    }
}



$colors: blonde, red, dkbrown, ltbrown, black;
$styles: hairboy1, hairboy2, hairboy3, hairboy4, hairboy5, hairgirl6, hairgirl1, hairgirl4, hairgirl2, hairgirl3, hairgirl5;

.hidden {
background: @include style-matrix($colors, $styles) url("base.svg);
}

(见codepen)

但是,每次运行mixin时,都会收到以下错误消息:

Invalid CSS after "...            url": expected "{", was "("pps#{$s}#{$c}..."

如何使用mixin生成多个背景？

Answer 1

Mixins返回属性/值对.如果只想要值,则需要一个函数.它看起来像这样:

@function style-matrix($colors, $styles) {
  $bg: compact();
  @each $s in $styles {
    @each $c in $colors {
      $bg: join($bg, url("pps#{$s}#{$c}.svg"), comma);
    }
  }
  @return $bg;
}

.hidden {
  background: style-matrix($colors, $styles), url("base.svg");
}