萨斯：在SCSS

Question

使用两个@each名单在我的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。

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; 
    } 
} 

请问有人可以给我一些指针，说明我在做什么错？

Answer 1

你需要做的是创建的第一个循环内循环（我已经简化了一点，所以它更容易看到）：

@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"); 
}