Sass: Używanie dwóch list @each w SCSS

W moim CSS muszę tworzyć klasy, które odwołują się do „koloru włosów” i „fryzury”

Napisałem mixin, aby zwiększyć wydajność pisania w CSS:

@mixin hair($hair, $colour) {
    .hair-#{$colour} .#{$hair}  { 
background:image-url("xsppsfhair#{$hair}#{$colour}.svg") center top no-repeat, 
image-url("xsppsheadgrey.svg") center top no-repeat, 
image-url("xsppsbhair#{$hair}#{$colour}.svg") center top no-repeat;
}


}

@include hair(spikyboy, blonde);    
@include hair(curlyafroboy, blonde);    

Daje to następujący CSS

.hair-blonde .spikyboy {
  background: url('../images/xsppsfhairspikyboyblonde.svg?1348681869') center top no-repeat, url('../images/xsppsheadgrey.svg?1348834673') center top no-repeat, url('../images/xsppsbhairspikyboyblonde.svg?1348682005') center top no-repeat;
}

.hair-blonde .curlyafro {
  background: url('../images/xsppsfhaircurlyafroblonde.svg?1348681869') center top no-repeat, url('../images/xsppsheadgrey.svg?1348834673') center top no-repeat, url('../images/xsppsbhaircurlyafroblonde.svg?1348682005') center top no-repeat;
}

To świetnie, ale ponieważ mam łączną kombinację 35 kolorów włosów i fryzur, wciąż kończę się na zbyt wielu @includes.

Na tej stronie, mówi SASS ma @each, który może być użyty do przechodzenia przez listy. Istnieje kolejny przykładtutaj. Jednak oba te przykłady pokazują tylko pętlę do 1 listy. Czy można przejść przez dwie listy?

Próbowałem wielu odmian mojego kodu, ale żaden z nich nie działa. Pomyślałem, że poniższe działania z pewnością zadziałają, ale otrzymuję komunikat o błędzie o tym, że $ color jest niezdefiniowany.

$hairstyle: (red, blonde, ltbrown);
$haircolour: (red, blonde, ltbrown);

    @each $hair in $haircolour, $colour in $haircolour {
    .hair-#{$colour} .#{$hair}  {
background:image-url("xsppsfhair#{$hair}#{$colour}.svg") center top no-repeat, 
image-url("xsppsheadgrey.svg") center top no-repeat, 
image-url("xsppsbhair#{$hair}#{$colour}.svg") center top no-repeat;
    }

    .girl.hair-#{$colour} #eyelash {
        background: image-url("xsppseyelash#{$colour}.svg") center top no-repeat;
    }
}

Czy ktoś mógłby mi podać kilka wskazówek dotyczących tego, co robię źle?

questionAnswers(1)

yourAnswerToTheQuestion