CSS - SASS：使用基於@each的mixin生成多個背景

我使用CSS創建髮型和顏色目錄。我有55種不同顏色和髮型的組合。每種髮型和顏色都有自己的圖像SVG文件，我需要將它們全部合併到一個背景中（使用CSS3的多背景特徵）。CSS - SASS：使用基於@each的mixin生成多個背景

我寫了這個混合產生多重背景：（這是基於混合料攪拌in this post）

@mixin style-matrix($colors, $styles) { 
    @each $s in $styles { 
     @each $c in $colors { 


       url("pps#{$s}#{$c}.svg"), 
     } 
    } 
} 



$colors: blonde, red, dkbrown, ltbrown, black; 
$styles: hairboy1, hairboy2, hairboy3, hairboy4, hairboy5, hairgirl6, hairgirl1, hairgirl4, hairgirl2, hairgirl3, hairgirl5; 

.hidden { 
background: @include style-matrix($colors, $styles) url("base.svg); 
}

（見codepen這裏）

然而，我每次運行混入，我得到這個錯誤信息：

Invalid CSS after "...   url": expected "{", was "("pps#{$s}#{$c}..."

如何使用mixin生成多個背景？

來源

2012-10-10 big_smile

你可以顯示你想要的結果CSS看起來像什麼嗎？它看起來像你試圖讓所有可能的頭髮/顏色組合成爲你的'.hidden'類的背景圖像。 – cimmanon

Mixins返回屬性/值對。如果你只想要這個值，你需要一個函數。它看起來像這樣：

@function style-matrix($colors, $styles) { 
    $bg: compact(); 
    @each $s in $styles { 
    @each $c in $colors { 
     $bg: join($bg, url("pps#{$s}#{$c}.svg"), comma); 
    } 
    } 
    @return $bg; 
} 

.hidden { 
    background: style-matrix($colors, $styles), url("base.svg"); 
}

來源

2012-10-11 03:47:00

這很好。謝謝！ –

CSS - SASS：使用基於@each的mixin生成多個背景

回答

相關問題