Хорошая идея использовать @mixin для "DRY'ing" до @keyframes? - PullRequest
0 голосов
/ 24 марта 2019

Хорошо ли использовать миксины для сушки ключевых кадров, как показано в следующем примере:

Обратите внимание, что я только что ушел и направился сюда, но если мне нужно больше, я думаю, что использование @mixins - лучший выбор. Я не знаком с обычаями написания аккуратных scss / sass, какой предпочтительный способ?

    @keyframes fade-in-left {
        0% {
            opacity: 0;
            transform: translate3d(-100%, 0, 0);
        }

        100% {
            opacity: 1;
            transform: translate3d(0, 0, 0);
        }
    }
    @keyframes fade-in-right {
        0% {
            opacity: 0;
            transform: translate3d(100%, 0, 0);
        }

        100% {
            opacity: 1;
            transform: translate3d(0, 0, 0);
        }
    }

против

@mixin fade-in-horizontally($direction_value) {
    @keyframes fade-in-left {
        0% {
            opacity: 0;
            transform: translate3d($direction_value, 0, 0);
        }

        100% {
            opacity: 1;
            transform: translate3d(0, 0, 0);
        }
    }
}

1 Ответ

2 голосов
/ 24 марта 2019

Миксины хороши, но их не следует использовать только для сокращения кода. В этом случае вы хотите определить свой @keyframes только один раз.

Итак, вот третий вариант: использование списка и каждой директивы .

$keyframes-fade: (
  ('left', -100%),
  ('right', 100%)
);

@each $dir, $translateTX in $keyframes-fade {
  @keyframes fade-in-#{$dir} {
    0% {
        opacity: 0;
        transform: translate3d($translateTX, 0, 0);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
  }
}

Это сделает ваш код короче, при этом его будет легко понять.

Вы можете увидеть вывод здесь

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...