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

【问题标题】：Convert a mixin that accepts only from & to keyframe selectors to accept multiple keyframe selectors将只接受 from & 的 mixin 转换为关键帧选择器以接受多个关键帧选择器
【发布时间】：2014-09-25 16:29:44
【问题描述】：

我有这个 Less 混合：

.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;
  }
}

感谢您的帮助。

【问题讨论】：

只需从 mixin 中删除 from 和 to 规则，然后将整个规则（以及所有其他百分比拆分）作为一个参数传递给 mixin。
或者有多个mixin，2阶段1个，3阶段另外1个
你可以在这里看到basic sample。
顺便说一句，还请注意，您不需要 ~"" 那里的东西。只是@name 是一个绝对正确的语法。
@Harry 请添加您的评论作为答案，以便它可以被接受。

标签： css less css-animations mixins less-mixins

【解决方案1】：

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

同样如 cmets 中的 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 框中的眼睛图标以查看编译后的输出。

注意：

Passing rulesets to a mixin 是在 Less v1.7.0 中引入的，因此上述代码不适用于较低版本。

【讨论】：