随机选择mixin

时间:2018-09-10 15:39:02

标签: sass mixins scss-mixins

我有3个mixin,每个mixins都由不同的背景图像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 ':'

我在这里使用错误的语法吗?还是这不是解决此问题的正确方法?

3 个答案:

答案 0 :(得分: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);
}

如果这样做,则可以在列表中添加任意数量的路径,而不必担心在mixin中添加另一个@if。 :)

答案 1 :(得分:0)

我通过将三个mixin更改为需要一个数字的一​​个来解决了这个问题:

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

答案 2 :(得分:0)

try使用了唯一的函数,该函数返回您要应用的属性。我使用了这段代码:

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