Sass:在SCSS中使用两个@each列表 [英] Sass: Using two @each lists in SCSS
问题描述
在我的CSS中,我必须创建引用头发颜色和发型的类。
In my CSS I have to create classes that make reference to a 'hair colour' and 'hairstyle'
我写了一个mixin来帮助我写CSS更高效:
I have written a mixin to help make my CSS writing more efficient:
@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种发色和
This is great, but as I have a total combination of 35 hair colours and hair styles, I still end up with way too many @includes.
在本页面,它说SASS有一个@each可以用于循环列表。还有一个示例此处。但是,这两个示例仅显示循环通过1列表。是否可以循环访问两个列表?
On this page, it says SASS has an @each which can be used to loop through lists. There is a further example here. However, both these examples only show looping through 1 list. Is it possible to loop through two lists?
我试过我的代码的许多变体,但没有一个似乎工作。我想以下是肯定会工作,但我只是得到一个关于$ color的错误消息未定义。
I have tried many variations of my code, but none seem to work. I thought the following would definitely work, but I just get an error message about $colour being undefined.
$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;
}
}
有人可以给我一些指示我做错了?
Could someone please give me some pointers as to what I am doing wrong?
推荐答案
你需要做的是在第一个循环内创建一个循环它更容易看到):
What you need to do is create a loop inside the first loop (I've simplified a bit so it's easier to see):
@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");
}
这篇关于Sass:在SCSS中使用两个@each列表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!