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生成多个背景

回答

相关问题