【问题标题】：Multiple transition properties in mixinmixin 中的多个转换属性
【发布时间】：2015-01-23 08:46:02
【问题描述】：

我有以下混合：

.transition (@property, @duration: 0.2s) {
    -webkit-transition: @property @duration ease-in-out;
       -moz-transition: @property @duration ease-in-out;
        -ms-transition: @property @duration ease-in-out;
         -o-transition: @property @duration ease-in-out;
            transition: @property @duration ease-in-out;
}

如何更改 mixin 以允许多个属性（即背景和颜色过渡）？

【问题讨论】：

Using undefined number of arguments in mixins 的可能重复项

标签： css less

【解决方案1】：

SO 已经有很多类似的问答 (for instance)，但由于其中大多数都充满了过时的（错误）信息和黑客，我猜想写一个新的答案是有意义的：

-

好吧，您需要决定是希望 mixin 将每个属性值检测为单独的参数（具有可选的默认值）还是将它们全部一起传递（这些是不兼容的要求，但仍然可以将它们组合起来- 见后）。

在最简单的情况下，mixin 应该被定义为：

.transition(@values) {
    transition: @values;
}

仅此而已，并像这样使用：

.transition(width);
.transition(color 0.2s ease-in-out);
.transition(opacity 2s ease-in, height 5s ease-out;);
// etc.

请参阅 the documetation 关于使用逗号分隔列表作为 mixin 参数的信息。

-

现在将单个值作为单独的 mixin 参数和默认选项。（老实说，这种盲目地为每个单一 mixin 的每个单一参数设置一些相当随机的默认值的倾向看起来像是一种常见的反模式，但无论如何）。您可能会注意到，上面的 mixin 定义不允许您为各个参数指定默认值。显然，如果您将 mixin 定义为：

.transition(@property, @duration: 0.2s, @timing: ease-in-out) {
    transition: @arguments;
}

（或类似的）它不能再处理多个属性（@duration 和 @timing 不会匹配相应的参数，无论您使用什么语法来调用它（只有一些特定的例外）。例如 .transition(opacity 2s ease-in, height 5s ease-out;); 会导致 transition: opacity 2s ease-in, height 5s ease-out 0.2s ease-in-out; 等等，这没有任何意义）

因此，如果您仍然需要两者（再一次不计算这通常会使这种 mixin 的使用变得不确定和混乱），您必须发明一些方法来以某种方式处理这两种变体。例如，最简单的方法（只是字面上无数可能的变体之一）只是为第一个参数中不同数量的值提供不同的定义（参见conditional mixins），例如：

.transition(@property, @duration: 0.2s, @timing: ease-out)
    when (length(@property) = 1)  {
        transition: @arguments;
}

.transition(...) when (default()) {
    transition: @arguments;
}

除了.transition(width);（和类似的东西）之外，用法与上面相同，现在有不同的结果。

-

和往常一样，如果只是写 vendor-prefixing mixins（我猜是这样），不管以上所有 - 只是 stop doing that。

【讨论】：

【解决方案2】：

这应该可以工作：

.transition (@property; @duration: 0.2s) {
    -webkit-transition-property: @property;
       -moz-transition-property: @property;
         -o-transition-property: @property;
            transition-property: @property;
    -webkit-transition-duration: @duration;
       -moz-transition-duration: @duration;
         -o-transition-duration: @duration;
            transition-duration: @duration;
        -webkit-timing-function: ease-in-out;
           -moz-timing-function: ease-in-out;
             -o-timing-function: ease-in-out;
                timing-function: ease-in-out;
}

.test {
  .transition(color, background; 3s)
}

这里最大的技巧是使用分号作为 mixin 的分隔符，这样我们就可以使用逗号作为转换属性的分隔符。此外，您不需要 -ms- 前缀 IE never had it for transitions。

【讨论】：

【解决方案3】：

为什么不这样呢？

混音：

.transition(@transition) {
  -webkit-transition: @transition;
       -o-transition: @transition;
          transition: @transition;
}

并使用它：例如：.transition(~"color ease-in-out 1s, background-color ease-in .5s");

希望对你有帮助

【讨论】：