0

我有三个 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 ':'

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

4

3 回答 3

0

好吧,如果您只更改路径,另一种解决方案是将这些路径放在一个列表中,随机取一个(使用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。:)

于 2018-09-11T21:28:31.097 回答
0

我通过将我的三个 mixin 更改为一个带数字的 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);
于 2018-09-10T16:06:23.267 回答
0

尝试使用返回您希望应用的属性的唯一函数。我使用了这段代码:

@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);
于 2018-09-10T16:50:30.833 回答