Случайно выбрать миксин - PullRequest
Новая
       21

Случайно выбрать миксин

0 голосов
/ 10 сентября 2018

У меня есть три миксина, каждый из которых состоит из разного фонового изображения 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 голосов
/ 10 сентября 2018

попробуйте использовать единственную функцию, которая возвращает свойство, которое вы хотите применить. я использовал этот код: 

@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);
0 голосов
/ 12 сентября 2018

Что ж, если вы изменяете только пути, другое решение состоит в том, чтобы поместить эти пути в список, выбрать один случайным образом (используя nth() function => см. Документацию: http://sass -lang.com / Документация / Sass / Script / Functions.html ) и поместите его как background-image.

Примерно так: 

$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 в ваш миксин. :)

0 голосов
/ 10 сентября 2018

Я решил эту проблему, изменив три моих миксина на тот, который принимает число: 

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