css - 将只接受 from & 的 mixin 转换为关键帧选择器以接受多个关键帧选择器

Question

我有这个少混合：

.keyframes (@name, @fromRules, @toRules) {
    @-webkit-keyframes ~'@{name}' { from { @fromRules(); } to { @toRules(); } }
            @keyframes ~'@{name}' { from { @fromRules(); } to { @toRules(); } }
}

我打电话例如：

.keyframes(fade-in,
    {
        opacity: 0;
    },
    {
        opacity: 1;
    }
);

结果是：

@-webkit-keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

但是我怎样才能使用 Less mixins，这样我就可以使用不同于 0%、100% 和超过 2 个关键帧选择器的关键帧选择器，所以结果将如下所示：

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

感谢帮助。

Answer 1

您可以通过将整个关键帧选择器列表（如 、 等）的规则作为单个规则集与动画名称一起传递给 mixin 来实现0%这50%一点100%。

同样正如评论中的 7-phases-max 所提到的，@-webkit-keyframes ~'@{name}'它不是必需的，它可以简单地写为@-webkit-keyframes @name.

.keyframes (@name, @rules) {
    @-webkit-keyframes @name { @rules(); }
            @keyframes @name { @rules(); }
}

div{
    .keyframes(fade-in,
    {
        0% { opacity: 0;}
        50% { opacity: 1;}
        100% { opacity: 0;}
    });
}

CodePen Demo - 单击 CSS 框中的眼睛图标以查看编译后的输出。

笔记：

• 将规则集传递给 mixin是在 Less v1.7.0 中引入的，因此上述代码不适用于较低版本。