相关疑难解决方法(0)

在我的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种头发颜色和发型,我的结局太多了@includes.

在这个页面上,它说SASS有一个@each,可用于遍历列表.有一个进一步的例子在这里.但是,这两个示例仅显示循环到1列表.是否可以遍历两个列表？

我尝试了很多代码,但似乎都没有.我认为以下肯定会有效,但我只是得到一个关于$ color未定义的错误消息.

$hairstyle: (red, blonde, ltbrown);
$haircolour: (red, blonde, ltbrown);

    @each …