如何编写具有灵活数量的参数的 LESS mixin？答案

【问题标题】：How to write a LESS mixin with a flexible amount of arguments?如何编写具有灵活数量的参数的 LESS mixin？
【发布时间】：2013-03-06 17:49:25
【问题描述】：

我编写了一个 LESS mixin，它使用适当的引擎前缀自动进行 CSS 转换。

.Transition(@Property, @Timing){
    -moz-transition: @Property @Timing linear;
    -webkit-transition: @Property @Timing linear;
    -o-transition: @Property @Timing linear;
    transition: @Property @Timing linear;
}

很遗憾，我无法指定一组选定的样式来制作动画。我只能指定一种特定的样式或“全部”。如果我尝试多次使用相同的 mixin 来将更多样式添加到混合中，则转换属性只会被覆盖。例如：

.class { .Transition(top, .2s); .Transition(opacity, .2s); .Transition(box-shadow, .2s); }

结果：

.class {
    -moz-transition: box-shadow, .2s;
    -webkit-transition: box-shadow, .2s;
    -o-transition: box-shadow, .2s;
    transition: box-shadow, .2s; 
}

如何编写一个 mixin，让我可以将灵活数量的值应用于一种样式？

【问题讨论】：

标签： css less css-transitions mixins

【解决方案1】：

合并支持

LESS v1.5 通过使用+ 为属性添加后缀来支持merging rules

merge 功能允许将来自多个属性的值聚合到单个属性下的逗号或空格分隔列表中。 merge 对于背景和变换等属性很有用。

...

例子：
.mixin() {
  box-shadow+: inset 0 0 10px #555;
}
.myclass {
  .mixin();
  box-shadow+: 0 0 20px black;
}
输出：
.myclass {
  box-shadow: inset 0 0 10px #555, 0 0 20px black;
}

分号支持

LESS v1.4(?) 引入了对multiple parameters with semi-colons 的支持。这允许每个参数包含文字逗号，而无需多个参数。

使用逗号作为 mixin 分隔符使得无法创建逗号分隔的列表作为参数。另一方面，如果编译器在 mixin 调用或声明中看到至少一个分号，则假定参数用分号分隔，并且所有逗号都属于 css 列表：

两个参数，每个参数都包含逗号分隔的列表：.name(1, 2, 3; something, else),

三个参数，每个参数包含一个数字：.name(1, 2, 3)，

使用虚拟分号创建 mixin 调用，其中一个参数包含逗号分隔的 css 列表：.name(1, 2, 3;),

逗号分隔默认值：.name(@param1: red, blue;)。

_示例

.transition(@args) {
    -webkit-transition: @args;
    -moz-transition: @args;
    -o-transition: @args;
    transition: @args;
}
.selector {
    .transition(.2s top, .2s opacity, .2s box-shadow;);
    //                            this is required -^
}

分号前支持

支持逗号前分号支持的多个参数比最初看起来要困难一些，主要是因为较少从@arguments 中去除逗号。我已经创建了一个 ZLESS project on github，我在其中添加了很多 mixin 来简化 LESS 的使用。

这是code I use for transition（没有编译器标志）：

.transition(@a, @b: X, ...) {
    //http://stackoverflow.com/a/13490523/497418
    @args: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`;
    -webkit-transition: @args;
    -moz-transition: @args;
    -o-transition: @args;
    transition: @args;
}

它会被用作：

.selector {
    .transition(.2s top, .2s opacity, .2s box-shadow);
}

【讨论】：

那么，有没有办法做我想做的，开箱即用？
@thiirteen，CSS 属性的参数需要有逗号分隔的值。我不知道您可以多次调用 mixin 并让它正确生成 CSS 作为单个样式声明。
@zzzzBov （新？）“逗号”的东西，你在真正的 CSS 属性名称的末尾添加一个 + 是一种很好的方法来做到这一点。这有点难看，因为您必须为列表中的每个成员重新调用整个 mixin，但它确实使它至少成为可能。
@Ponty, >“这有点难看，因为您必须为列表中的每个成员重新调用整个 mixin”- Yoda 建议为此使用循环。

【解决方案2】：

我认为，如果您将过渡的“属性”分开，那可能会奏效！

例如：

.transitionProperty ( @property1, @property2, @property3) {
   -moz-transition-property : @property1, @property2, @property3;
   -o-transition-property : @property1, @property2, @property3;
   -webkit-transition-property : @property1, @property2, @property3;
   transition-property : @property1, @property2, @property3;
}

或者类似的东西。我认为这是一个值得考虑的问题;)

【讨论】：

【解决方案3】：

您基本上需要将它们作为转义字符串传递。所以修改你的代码：

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

然后像这样使用它：

.Transition(~"top .2s linear, opacity .2s linear, box-shadow .2s linear");

产生这个：

-moz-transition: top .2s linear, opacity .2s linear, box-shadow .2s linear;
-webkit-transition: top .2s linear, opacity .2s linear, box-shadow .2s linear;
-o-transition: top .2s linear, opacity .2s linear, box-shadow .2s linear;
transition: top .2s linear, opacity .2s linear, box-shadow .2s linear;

【讨论】：