我有三个mixin,每个mixin都包含一个不同的背景图像SVG,它有一个颜色传递给它们(简化示例):
@mixin svg-1($color) {
background-image: url('data:image/svg+xml;utf8,<svg><g fill="#{$color}"><path d="foobar"></svg>');
}
@mixin svg-2($color) {
background-image: url('data:image/svg+xml;utf8,<svg><g fill="#{$color}"><path d="barfoo"></svg>');
}
@mixin svg-3($color) {
background-image: url('data:image/svg+xml;utf8,<svg><g fill="#{$color}"><path d="blabla"></svg>');
}
然后,我尝试通过执行以下操作随机选择其中的任何三个:
@include svg-#{random(3)}($color);
这给了我一个编译错误:
Error: property "#{random(3)}" must be followed by a ':'
我在这里使用了错误的语法,或者这不是解决此问题的正确方法吗?
好吧,如果你只更改路径,另一个解决方案是将这些路径放在一个列表中,随机取一个(使用nth()
函数=>参见文档:http://sass-lang.com/documentation/Sass/Script/Functions.html)并将其作为背景图像。
像这样的东西:
$paths: 'foobar', 'barfoo', 'blabla';
@mixin svg($color) {
background-image: url('data:image/svg+xml;utf8,<svg><g fill="#{$color}"><path d="#{nth($paths, random(length($paths)))}"></svg>');
}
div{
@include svg(purple);
}
如果你这样做,你可以在列表中添加任意数量的路径,而不必担心在你的mixin中添加另一个@if。 :)
我通过将我的三个mixins更改为一个带有数字的一个来解决这个问题:
@mixin svg($num, $color) {
@if ($num == 1) {
background-image: url('data:image/svg+xml;utf8,<svg><g fill="#{$color}"><path d="foobar"></svg>');
}
@if ($num == 2) {
background-image: url('data:image/svg+xml;utf8,<svg><g fill="#{$color}"><path d="barfoo"></svg>');
}
@if ($num == 3) {
background-image: url('data:image/svg+xml;utf8,<svg><g fill="#{$color}"><path d="blabla"></svg>');
}
}
然后通过传递这样的随机数来调用:
@include svg(random(3), $color);
尝试使用唯一的函数返回您想要应用的属性。我用这个代码:
@mixin svgRandom($color) {
$randomNum : random(3);
@if $randomNum == 1 {
background-image: url('data:image/svg+xml;utf8,<svg><g fill="#{$color}"><path d="foobar"></svg>');
} @else if $randomNum == 2 {
background-image: url('data:image/svg+xml;utf8,<svg><g fill="#{$color}"><path d="barfoo"></svg>');
} @else if $randomNum == 3 {
background-image: url('data:image/svg+xml;utf8,<svg><g fill="#{$color}"><path d="blabla"></svg>');
}
}
并称之为:
@include svgRandom(#00ff00);