Sass: использование двух списков @each в SCSS
В моем 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, который можно использовать для циклического перемещения по спискам. Есть еще один примерВот, Тем не менее, оба эти примера показывают только циклическое прохождение 1 списка. Можно ли перебрать два списка?
Я перепробовал много вариантов моего кода, но ни один из них не работает. Я думал, что следующее определенно сработает, но я просто получаю сообщение об ошибке, что $ 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;
}
}
Может, кто-нибудь подскажет, что я делаю не так?