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属性的这个问题，例如{I}我需要在开头添加box-shadow。

有没有办法用Less来声明inset多个参数的灵活性，就像CSS3属性一样？

Answer 1

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

选项1：（最简单的解决方案 - 感谢highlighting the miss的七阶段最大值）

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

摘自official Less website：

使用逗号作为mixin分隔符，无法将逗号分隔列表创建为参数。另一方面，如果编译器在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：

将引号中的输入值传递给mixin（需要转换多少特定属性）。在mixin中，使用~或e()内置函数来删除引号。

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

Less允许使用...选项创建允许/接受可变数量输入的mixin。因此，您可以使用与原始代码中相同的mixin，方法是将...添加到输入变量并按原来的要求调用它。

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

基本上我们正在做的是使用...接受多个参数作为mixin的输入，然后遍历每个参数并将其添加到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本身有任何“休息”风格的论点。

在mixins中使用未定义数量的参数

2 个答案: