在混合中使用未定义数量的参数

Question

我目前在我的Less CSS表中有-webkit特定的属性，我正在尝试用mixins更新它们以添加-moz属性，如下所示：

.transition(@1) {
    -webkit-transition: @1;
    -moz-transition: @1;
}

div {
    .transition(all .5s);
}

上面的例子运行得很好，但是我也有类似的东西：

div {
    -webkit-transition: border-color .3s, background .3s;
}

我不能将mixin作为.transition(border-color .3s, background .3s)调用，因为它的参数比mixin中定义的要多。所以我现在要做的是：

.transition(@1) {
    -webkit-transition: @1;
    -moz-transition: @1;
}
.transition-2(@1, @2) {
    -webkit-transition: @1, @2;
    -moz-transition: @1, @2;
}

div {
    .transition-2(border-color .3s, background .3s);
}

这很烦人，每当我使用以前没有使用过的一些参数时，我都需要在我的工作表中添加冗余代码；我在其他CSS3属性中也遇到了这个问题，例如当我需要在开始时添加inset时，我就遇到了这个问题。

有没有办法像CSS3属性那样用更少的参数灵活地声明mixins？

Answer 1

对于这种情况，可以使用下面提到的任何一个选项来避免冗余的mixin代码。

选项1: (最简单的解决方案-感谢highlighting the miss的七个阶段-最大)

我们可以使用分号作为参数的分隔符/分隔符，当我们在指定所有需要转换的属性(以逗号分隔的格式)后在末尾添加分号时，它之前的整个部分将被视为一个单独的参数。

从

中提取

另一方面，如果编译器在mixin调用或声明中看到至少一个分号，则它假定参数由分号分隔，并且所有逗号都属于css列表

.transition(@1) {
    -webkit-transition: @1;
    -moz-transition: @1;
}

div{
    .transition(border-color .5s, background .3s, color .3s;);
}

因此，上面的代码在编译时将导致

div {
    -webkit-transition: border-color 0.5s, background 0.3s, color 0.3s;
    -moz-transition: border-color 0.5s, background 0.3s, color 0.3s;
}

选项2:

.transition(@1) {
    -webkit-transition: ~"@{1}";
    -moz-transition: ~"@{1}";
}

div {
    .transition("border-color .5s, background .3s");
}
div#sample2 {
    .transition("border-color .3s, background .3s, color .3s");
}

将在编译时生成以下CSS

div {
    -webkit-transition: border-color .5s, background .3s;
    -moz-transition: border-color .5s, background .3s;
}
div#sample2 {
    -webkit-transition: border-color .3s, background .3s, color .3s;
    -moz-transition: border-color .3s, background .3s, color .3s;
}

选项3:

因此，您可以使用与原始代码中相同的混合，方法是将...添加到输入变量中，并按照您最初希望的方式调用它。

.transition(@args...) {
    -webkit-transition: @args;
    -moz-transition: @args;
}

div {
    .transition(border-color .5s, background .3s);
}

上面的代码将成功编译，但唯一的问题是它在编译时会产生以下输出。正如您所看到的，问题在于参数值是空格分隔的，而不是逗号分隔的(为了让CSS正常工作，它们应该是空格分隔的)。

div {
    -webkit-transition: border-color 0.5s background 0.3s;
    -moz-transition: border-color 0.5s background 0.3s;
}

当然，我们可以使用正则表达式编写复杂的replace函数，但这会使代码变得混乱。相反，我们可以使用循环和一些内置函数来实现所需的输出(如下所示)。

.transition(@args...) {
    .loop-args(@argCount) when (@argCount > 0) {
        .loop-args(@argCount - 1);
        @arg: extract(@args, @argCount);
        -webkit-transition+: @arg;
        -moz-transition+: @arg;
    }
    .loop-args(length(@args));
}

div {
    .transition(border-color .5s, background .3s, color .3s);
}

基本上，我们要做的是使用...接受多个参数作为混合输入，然后循环每个参数并将其添加到CSS属性的值中。+: (在Less V1.5.0中引入的合并功能)用于生成逗号分隔的输出。

编译时，它将产生以下输出：

div {
    -webkit-transition: border-color 0.5s, background 0.3s, color 0.3s;
    -moz-transition: border-color 0.5s, background 0.3s, color 0.3s;
}

Answer 2

你可以试一试

.transition(@1) {
    -webkit-transition: @1;
    -moz-transition: @1;
}
.transition-2(@1, @2) {
    .transition(@1); // this includes all the stuff from transition(@1)
    color:red; // additional stuff
}

至于你的实际问题，我不相信LESS本身有任何类型的"rest“风格的参数传递。