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?