1

我写了一个 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，让我将灵活数量的值应用于一种样式？

4

3 回答 3

2

合并支持

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 项目，在其中添加了许多 mixin 以简化 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);
}
于 2013-03-07T16:41:45.493 回答
1

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

.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;
于 2013-03-07T16:33:14.833 回答
1

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

例如 ：

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

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

于 2013-03-06T21:21:40.000 回答