Less 少过渡混合蛋白

是否有人可以演示如何使用以下较少的混合来轻松地将以下属性转换为.25s

边框顶部：6px实心#ff3300

.transition-properties(...) {
@props: ~`"@{arguments}".replace(/[\[\]]/g, '')`;
-webkit-transition-property: @props;
-moz-transition-property: @props;
-o-transition-property: @props;
transition-property: @props;
}

更新：小于1.4+的能力 如果小于1.4，则不需要原始答案中用于逗号分隔参数的javascript。相反，在参数字符串末尾使用“伪”分号会导致逗号被视为列表分隔符，而不是参数分隔符，因此，在输入多个转换时，这一点现在起作用：

减1.4+ mixin调用中的分号（

.transition属性（border top.25s linear，color.5s linear；）；

）非常重要。如果是ommited，两个参数之间的逗号将被删除，这将导致无效的css规则

。转换属性（…）{
-webkit转换：@参数；
-moz转换：@参数；
-o-转变：@参数；
转换：@参数；
}
.你们班{
边框顶部：1件纯黑；
.transition属性（边框顶部.25s线性，颜色.5s线性；）；/*分号是必需的*/
}                                                                |
注意这个分号
.你的班级：悬停{
边框顶部：6px实心#ff3300；
}

CSS输出 请注意，逗号保留在两个属性值之间：

.yourClass{
边框顶部：1件纯黑；
-webkit过渡：边框顶部0.25s线性，颜色0.5s线性；
-moz过渡：边框顶部0.25s线性，颜色0.5s线性；
-o型过渡：边框顶部0.25s线性，颜色0.5s线性；
过渡：边框顶部0.25s线性，颜色0.5s线性；
}
.你的班级：悬停{
边框顶部：6px实心#ff3300；
}

原始答复[前减1.4] 显然，具体细节将取决于您的具体实现。但是，这大体上说明了您将如何使用它：

较少的

。转换属性（…）{
@道具：~`{arguments}.replace（/[\[\]]/g'，）`；
-webkit转换：@props；
-moz过渡：@props；
-o-过渡：@props；
过渡：@道具；
}
.你们班{
边框顶部：1件纯黑；
.过渡特性（边框顶部.25s线性）；
}
.你的班级：悬停{
边框顶部：6px实心#ff3300；
}

CSS输出

.yourClass{
边框顶部：1件纯黑；
-webkit过渡：边框顶部0.25s线性；
-moz过渡：边界顶部0.25s线性；
-o型过渡：边界顶部0.25s线性；
过渡：边界顶部0.25s线性；
}
.你的班级：悬停{
边框顶部：6px实心#ff3300；
}

解释 怎么回事

@props: ~`"@{arguments}".replace(/[\[\]]/g, '')`;

允许您进行多个逗号分隔的转换，例如：

.transition-properties(border-top .25s linear, color 1s linear);

这将编译为用逗号分隔（例如，仅显示一行）：

如果只使用了直接的

@参数

，则结果是没有逗号分隔：

transition: border-top 0.25s linear color 1s linear;

---

这对于属性是不正确的。

这里似乎有一个错误：所有转换属性都应该被转换替换，因为您使用的快捷方式具有多个参数（属性持续时间和缓和类型）。@arthur.sw:这是一个很好的发现。我只是遵循OP的原始代码（它有

转换属性

），并让较少的人传递值，甚至没有注意到调用它来设置计时和放松也是错误的“属性”。我现在就去修。

transition: border-top 0.25s linear color 1s linear;