在我的 CSS 中,我必须创建引用“头发颜色”和“发型”的类
我编写了一个 mixin 来帮助提高我的 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。
On this page ,它说 SASS 有一个 @each 可用于循环列表。还有一个例子here 。但是,这两个示例都仅显示了 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;
}
}
有人可以给我一些关于我做错了什么的指示吗?
最佳答案
您需要做的是在第一个循环内创建一个循环(我已经简化了一点,以便更容易看到):
@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");
}
关于css - 在 SCSS 中循环两个 @each 列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12645962/