Question

我编写了一个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，让我可以将灵活的数值应用于一种风格？

Answer 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，我已经添加了很多mixins来简化与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);
}

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

或类似的东西。我认为这是值得思考的问题;）

Answer 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;

如何使用灵活的参数编写LESS mixin？

3 个答案:

合并支持

分支支持

预分支支持