薩斯：在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"); 
}