2

CSSを使用してヘアスタイルと色のカタログを作成しています。私は55の異なる色とヘアスタイルの組み合わせを持っています。それぞれのヘアスタイルと色には独自の画像SVGファイルがあり、それらすべてを1つの背景に結合する必要があります（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);
}

（ここでcodepenを参照してください）

ただし、ミックスインを実行するたびに、次のエラーメッセージが表示されます。

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

ミックスインを使用して複数の背景を生成するにはどうすればよいですか？

4

1 に答える 1

5

ミックスインはプロパティと値のペアを返します。値のみが必要な場合は、関数が必要です。次のようになります。

@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");
}
于 2012-10-11T03:47:00.897 に答える