CSS - SASS: использование микшинов на основе @each для создания нескольких фонов

Question

Я использую CSS для создания каталога причесок и цветов. У меня есть сочетание 55 различных цветов и причесок. У каждой прически и цвета есть свой собственный SVG-файл изображения, и мне нужно объединить их все в один фон (используя функцию множественного фона CSS3).

Я написал это микширование для создания нескольких фонов: (Он основан на миксинах в этом посте)

@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);
}

(см. здесь)

Однако каждый раз, когда я запускаю миксин, я получаю это сообщение об ошибке:

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

Как я могу использовать миксин для создания нескольких фонов?

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");
}