2

I am using CSS to create a catalog of hairstyles and colours. I have a combination of 55 different colours and hair styles. Each hair style and colour has its own image SVG file and I need to combine them all into a single background (Using the multiple background feature of CSS3).

I have written this mixing to generate the multiple backgrounds: (It is based on the 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);
}

(see codepen here)

However, every time I run the mixin, I get this error message:

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

How can I use the mixin to generate the multiple backgrounds?

Community
  • 1
  • 1
big_smile
  • 1,487
  • 4
  • 26
  • 59
  • Can you show what you want the resulting CSS to look like? It looks like you're trying to make all the possible hair/color combinations be a background image of your `.hidden` class. – cimmanon Oct 10 '12 at 20:00

1 Answers1

5

Mixins return property/value pairs. If you want the value only, you need a function. It looks like this:

@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");
}
Razor
  • 27,418
  • 8
  • 53
  • 76
Miriam Suzanne
  • 13,632
  • 2
  • 38
  • 43