如何编写一个具有灵活数量参数的LESS mixin

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来将更多的样式放入混合中，那么transition属性就会被覆盖。例如:

.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通过用+

作为属性后缀引入了对合并规则的支持

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(?)引入了对带有分号的多个参数的支持。这允许每个参数包含字面逗号，而不需要多个参数。

使用逗号作为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 -^
}

---

前分号支持

用逗号和分号前支持多个参数比一开始看起来要困难一些，主要是因为less会从@arguments中去掉逗号。我已经在github上启动了一个ZLESS项目，在那里我添加了很多mixins来简化使用LESS的工作。

这是我用于转换(没有编译器标志)的代码:

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