Question

使用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);
        }
    }

vs

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

Answer 1

杂类很棒，但不应仅用于缩短某些代码。在这种情况下，您只想定义一次./flaskblog.py。

因此，这是第三个选择：使用list和each directive。

python3 flaskblog.py

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

You can see the output here

将@mixin用于@keyframes的“干”的好主意吗？

1 个答案: