时间戳

首页 > 解决方案 > 使用@mixin 来“干燥”@keyframes 是个好主意吗？

sass - 使用@mixin 来“干燥”@keyframes 是个好主意吗？

问题描述

使用 mixins 来干燥关键帧是否是个好主意，如下例所示：

请注意，我在这里只有左右，但如果我在哪里有更多，我认为使用@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);
        }
    }
}

标签： sass

解决方案

Mixin 很棒，但不应该仅仅用于缩短一些代码。在这种情况下，您只想定义@keyframes一次。

因此，这是第三种选择：使用列表和each 指令。

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

这将使您的代码更短，同时保持易于理解。

你可以在这里看到输出

推荐阅读