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

【问题标题】：CSS - SASS: Using @each based mixins to generate multiple backgroundsCSS - SASS：使用基于 @each 的 mixins 生成多个背景
【发布时间】：2012-10-01 06:15:07
【问题描述】：

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

我已经写了这个混合来生成多个背景：（它基于mixin in this post）

@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 生成多个背景？

【问题讨论】：

你能展示你想要生成的 CSS 的样子吗？看起来您正在尝试使所有可能的头发/颜色组合成为您的 .hidden 类的背景图像。

标签： css sass

【解决方案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");
}

【讨论】：