Sass: использование двух списков @each в SCSS

Question

В моем CSS я должен создать классы, которые ссылаются на "цвет волос" и "прическу"

Я написал миксин, чтобы сделать мой 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);    

Это производит следующий 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;
}

Это замечательно, но, поскольку у меня есть в общей сложности 35 цветов и причесок, я все равно получаю слишком много @include.

На этой странице написано, что в SASS есть @each, который можно использовать для циклического перемещения по спискам. Здесь есть еще один пример. Тем не менее, оба эти примера показывают только циклический просмотр одного списка. Можно ли перебрать два списка?

Я перепробовал много вариантов моего кода, но ни один из них не работает. Я думал, что следующее определенно сработает, но я просто получаю сообщение об ошибке, что $ color не определен.

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

Может, кто-нибудь подскажет, что я делаю не так?

Answer 1

Что вам нужно сделать, это создать цикл внутри первого цикла (я немного упростила его, чтобы его было легче увидеть):

@mixin style-matrix($colors, $styles) {
    @each $s in $styles {
        @each $c in $colors {
            .#{$s} .#{$c} {
                background:image-url("xsppsfhair-#{$s}-#{$c}.svg");
            }
        }
    }
}

$colors: blonde, brunette, auburn;
$styles: beehive, pixie, bob;
@include style-matrix($colors, $styles);

Вы получаете этот вывод:

.beehive .blonde {
  background: image-url("xsppsfhair-beehive-blonde.svg");
}

.beehive .brunette {
  background: image-url("xsppsfhair-beehive-brunette.svg");
}

.beehive .auburn {
  background: image-url("xsppsfhair-beehive-auburn.svg");
}

.pixie .blonde {
  background: image-url("xsppsfhair-pixie-blonde.svg");
}

.pixie .brunette {
  background: image-url("xsppsfhair-pixie-brunette.svg");
}

.pixie .auburn {
  background: image-url("xsppsfhair-pixie-auburn.svg");
}

.bob .blonde {
  background: image-url("xsppsfhair-bob-blonde.svg");
}

.bob .brunette {
  background: image-url("xsppsfhair-bob-brunette.svg");
}

.bob .auburn {
  background: image-url("xsppsfhair-bob-auburn.svg");
}