我正在使用 CSS 创建发型和颜色目录。我有 55 种不同颜色和发型的组合。每种发型和颜色都有自己的图像 SVG 文件,我需要将它们全部组合成一个背景(使用 CSS3 的多背景功能)。
我编写了这个混合来生成多个背景:(它基于 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)
但是,每次运行 mixin 时,我都会收到此错误消息:
Invalid CSS after "... url": expected "{", was "("pps#{$s}#{$c}..."
如何使用 mixin 生成多个背景?
最佳答案
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");
}
关于CSS-SASS : Using @each based mixins to generate multiple backgrounds,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12825039/