No meu CSS eu tenho que criar classes que façam referência a uma 'cor de cabelo' e 'penteado'

Eu escrevi um mixin para ajudar a tornar minha escrita CSS mais eficiente:

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

Isso produz o seguinte 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;
}

Isso é ótimo, mas como eu tenho uma combinação total de 35 cores de cabelo e estilos de cabelo, eu ainda acabo com muitos @includes.

Nesta página, diz SASS tem um @each que pode ser usado para percorrer listas. Existe um outro exemploAqui. No entanto, ambos os exemplos mostram apenas um loop através de uma lista. É possível percorrer duas listas?

Eu tentei muitas variações do meu código, mas nenhum parece funcionar. Eu pensei que o seguinte iria funcionar definitivamente, mas acabei de receber uma mensagem de erro sobre o $ color sendo indefinido.

$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;
    }
}

Alguém poderia me dar algumas dicas sobre o que estou fazendo de errado?