css - mixin 中的多个过渡属性

Question

我有以下混合:

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

我如何更改混合以允许多个属性(即背景和颜色转换)？

Answer 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 定义为:

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

(或类似的)它不能再处理多个属性(@duration 和 @timing 将不匹配相应的参数，无论您使用什么语法调用它(使用只是一些特定的异常(exception))。.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 .