Sass 随机选取mixin

我有三个混音器，每个混音器由不同的背景图像SVG组成，SVG具有传递给它们的颜色（简化示例）：

这给了我一个编译错误：

Error: property "#{random(3)}" must be followed by a ':'

---

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

我通过将我的三个混音更改为一个带数字的混音来解决此问题：

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

---

请尝试使用唯一返回您希望应用的属性的函数。我使用了以下代码：

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

---

如果只更改路径，另一种解决方案是将这些路径放在列表中，随机选择一个路径（使用

nth（）

function=>请参阅文档：）并将其作为背景图像

大概是这样的：

@include svg-#{random(3)}($color);

@include svg(random(3), $color);

$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);
}

$path:'foobar'，'barfoo'，'blablabla'；
@混合svg（$color）{
背景图像：url（'data:image/svg+xml；utf8'）；
}
div{
@包括svg（紫色）；
}

---

如果这样做，您可以在列表中添加任意数量的路径，而无需担心在mixin中添加另一个@If.：）

如果您只更改一条路径，您可以在没有任何@If的mixin中使用

nth（$path，random（length（$path）））

创建路径列表。@resedan您的建议不会给我提供一个比公认答案更好的解决方案。你可能想考虑把它作为一个解决方案，这样读者就可以看到另一个我觉得更好的解决方案。你是对的，B68。我还补充了我的想法。谢谢您的考虑。：）谢谢Kike，我比较喜欢这个解决方案，因为它比较干燥

@include svgRandom(#00ff00);

$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);
}