2

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

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

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

上面的例子工作正常，但我也有这样的事情：

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

而且我不能调用mixinas.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 属性也有这个问题，例如box-shadow当我需要inset在开头添加时。

有什么方法可以mixins用 Less 声明其参数数量的灵活性，就像 CSS3 属性一样？

4

2 回答 2

1

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

选项 1：（最简单的解决方案 - 感谢 7phases-max突出显示未命中）

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

来自Less官方网站的摘录：

使用逗号作为 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;
}
于 2014-10-02T06:21:32.563 回答
0

你可以试试

.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 本身有任何“休息”风格的论据通过。

于 2012-06-13T11:51:03.100 回答