随机挑选混料

Question

我有三个混合器，每个混频器由一个不同的背景图像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 ':'

我是在这里使用错误的语法，还是这不是处理这个问题的正确方法？

Answer 1

如果您只更改路径，另一种解决方案是将这些路径放入列表中，随机选择一个路径(使用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);
}

如果这样做，您可以在列表中添加任意多个路径，而不必担心将另一个@if添加到您的混合器中。:)

Answer 2

我解决了这个问题，把我的三个混合器改成了一个数字：

@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);

Answer 3

尝试使用一个唯一的函数来返回您想要应用的属性。我使用了这个代码：

@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);