26

LESS 允许参数混合，例如：

.transition(@property, @duration){
    transition:         @property @duration;
    -moz-transition:    @property @duration; /* Firefox 4 */
    -webkit-transition: @property @duration; /* Safari and Chrome */
    -o-transition:      @property @duration; /* Opera */
}

但是，这并不总是适用于转换等属性。如果您尝试进行多个转换并尝试多次调用 mixin，则最后一个 mixin 会覆盖所有先前定义的转换。这是因为定义多个转换的正确 CSS3 语法是：

... {
    transition: @property1 @duration1, @property2 @duration2, ...;
}

我能想到的将多个转换定义为 mixin 的唯一方法是重载 mixin：

.transition(@property, @duration){...}
.transition(@property, @duration, @prop2, @dur2){...}
.transition(@property, @duration, @prop2, @dur2, @prop3, @dur3){...}

有没有更健壮和简洁的方法来定义过渡混合以接受可变数量的参数并构造适当的过渡 CSS？

背景：有时我想在多个属性上进行转换；例如，a:hover可能会触发背景颜色、框阴影、文本颜色等的转换...

4

6 回答 6

32

在此处查看我的答案：多个属性在 mixins 中被视为单独的参数

摘要：将此mixin用于可变数量的参数：

.transition (@value1,@value2:X,...)
{
    @value: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`;

    -webkit-transition: @value;
    -moz-transition: @value;
    -ms-transition: @value;
    -o-transition: @value;
    transition: @value;
}
于 2012-11-21T09:57:13.270 回答
22

LESS 1.3.3+ 的更新

输出是相同的，但请注意在新版本的 LESS 中如何通过使用分号而不是转义字符串来传递属性的区别：

@prop1: color;
@prop2: opacity;
@dur1: 3s;
@dur2: 4s;

.transition(@transString: 0) when not (@transString = 0) {
    transition:         @transString;
    -moz-transition:    @transString; /* Firefox 4 */
    -webkit-transition: @transString; /* Safari and Chrome */
    -o-transition:      @transString; /* Opera */
}

.class1 {.transition();}
.class2 {.transition(width 2s, height 2s;);}
                                        ^
                                   semicolon here
.class3 {.transition(@prop1 @dur1, @prop2 @dur2;);}
                                               ^
                                         semicolon here

分号强制将逗号作为列表分隔符而不是参数分隔符进行评估。

LESS pre 1.3.3 的一种解决方案

我们将正确的属性参数构建为 的字符串transition，然后使用转义值 ( ~) 运算符将其转换为所需的专有语法。通过使用字符串插值 ( @{variableName})，我们甚至可以将变量嵌入到进程中，但实际输入需要采用转义字符串的形式。

更少的代码

@prop1: color;
@prop2: opacity;
@dur1: 3s;
@dur2: 4s;

.transition(@transString: 0) when not (@transString = 0) {
    transition:         @transString;
    -moz-transition:    @transString; /* Firefox 4 */
    -webkit-transition: @transString; /* Safari and Chrome */
    -o-transition:      @transString; /* Opera */
}

.class1 {.transition();}
.class2 {.transition(~" width 2s, height 2s");}
.class3 {.transition(~" @{prop1} @{dur1}, @{prop2} @{dur2}");}

CSS 输出

注意： no.class1是输出，因为保护表达式确保输入了某些内容（尽管它不能防止不正确的输入）。

.class2 {
  transition: width 2s, height 2s;
  -moz-transition: width 2s, height 2s;
  -webkit-transition: width 2s, height 2s;
  -o-transition: width 2s, height 2s;
}
.class3 {
  transition: color 3s, opacity 4s;
  -moz-transition: color 3s, opacity 4s;
  -webkit-transition: color 3s, opacity 4s;
  -o-transition: color 3s, opacity 4s;
}
于 2012-07-19T01:22:46.110 回答
6

注意：添加此答案并不是为了说明现有答案不正确或已过时。所有答案都是有效的，并且仍然有效。这只是提供了一种不同的方法，在我看来，它更复杂一点，但在如何将每个参数称为键值对方面也更灵活。

使用此方法的优点：当需要对值执行任何额外操作（例如添加unitas或执行任何额外数学运算等）或为也动态添加供应商前缀时deg，此方法将变得更加有用。例如，有时您可能只想将输入属性作为输入属性传递给 mixin，但想为 the和为etc添加。px@propertytransform-webkit-transform-webkit-transition-moz-transform-moz-transition

在这个方法中，我们利用了...允许我们向 mixin 传递可变数量的参数、循环传递extract的每个参数、属性名称以及附加参数（如持续时间、旋转度等）的特性然后使用 Less 提供的合并功能来连接为属性指定的值。

  • 用+:逗号连接属性值，并在 Less v1.5.0 中引入
  • 用+_:空格连接属性值，并在 Less v1.7.0 中引入。
.transition(@args...){
    .loop-args(@argCount) when (@argCount > 0) {
        .loop-args(@argCount - 1);
        @arg: extract(@args, @argCount);
        @property: extract(@arg,1);
        @duration: extract(@arg,2);
        -webkit-transition+: @property @duration;
        -moz-transition+: @property @duration;
        -o-transition+: @property @duration;
        transition+: @property @duration;
    }
    .loop-args(length(@args));    
}

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

.transform(@args...){
    .loop-args(@argCount) when (@argCount > 0) {
        .loop-args(@argCount - 1);
        @arg: extract(@args, @argCount);
        @property: extract(@arg,1);
        @param: extract(@arg,2);
        -webkit-transform+_: ~"@{property}(@{param})";
        -moz-transform+_: ~"@{property}(@{param})";
        -o-transform+_: ~"@{property}(@{param})";
        transform+_: ~"@{property}(@{param})";
    }
    .loop-args(length(@args));    
}

div#div2{
    .transform(rotate, 20deg; scale, 1.5; translateX, 10px);
}

编译后的上述代码将产生以下输出：

div {
    -webkit-transition: background 1s, border-color 2s, color 2s;
    -moz-transition: background 1s, border-color 2s, color 2s;
    -o-transition: background 1s, border-color 2s, color 2s;
    transition: background 1s, border-color 2s, color 2s;
}
div#div2 {
    -webkit-transform: rotate(20deg) scale(1.5) translateX(10px);
    -moz-transform: rotate(20deg) scale(1.5) translateX(10px);
    -o-transform: rotate(20deg) scale(1.5) translateX(10px);
    transform: rotate(20deg) scale(1.5) translateX(10px);
}

相关答案：

  • 这是来自7-phases-max的答案，它更多地解释了如何使用此方法自动添加供应商前缀，就像我在优势段落中提到的那样。
于 2014-10-04T06:46:35.130 回答
6

在 LESS 中，您可以使用逗号或分号分隔参数。对于包含逗号的单个值，您可以用分号终止该单个值，以便将列表作为单个值发送，如下所示：

.class {
  .background-size(100%, auto;);
}

对于多个值，只需使用以下语法：

/* Example mixin */
.set-font-properties(@font-family, @size) {  
  font-family: @font-family;
  font-size: @size;
}
/* Usage with comma-separated values */
.class {
  .set-font-properties(Arial, sans-serif; 16px);
}

/* Output */
.class {
  font-family: Arial, sans-serif;
  font-size: 16px;
}

十分简单！

于 2013-05-13T21:00:43.120 回答
4

This should work, I think:

.transition(...) {
    transition:         @arguments;
    -moz-transition:    @arguments; /* Firefox 4 */
    -webkit-transition: @arguments; /* Safari and Chrome */
    -o-transition:      @arguments; /* Opera */
}

... - is a valid less syntax, not something to be replaced.

于 2013-01-07T14:29:49.863 回答
2

从 LESS 1.4 开始，文档 ( http://lesscss.org/features/#mixins-parametric-feature-mixins-with-multiple-parameters ) 提出了处理此问题的正确方法：

使用逗号作为 mixin 分隔符使得无法创建逗号分隔的列表作为参数。另一方面，如果编译器在 mixin 调用或声明中看到至少一个分号，它假定参数用分号分隔并且所有逗号都属于 css 列表：

具体来说，mixin：

.transition(@prop-or-props) {
    -webkit-transition: @prop-or-props;
       -moz-transition: @prop-or-props;
         -o-transition: @prop-or-props;
            transition: @prop-or-props;
}

用法：

.transition(opacity .2s, transform .3s, -webkit-transform .3s;);

请注意，多个属性用逗号分隔，结尾的分号导致逗号分隔的列表在 mixin 中被视为单个参数。

rest...使用参数定义 mixin 并能够提取任意长度参数的每个元素以进行单独处理会更好，但我正在考虑的用例是添加供应商前缀来转换转换（所以我可以调用它只是简单地自动添加.transition(opacity .2s, transform .3s)并-webkit-transform自动添加位），也许这最好由不同的实用程序来处理（例如，gulp-autoprefixer）。

于 2014-06-10T15:02:44.297 回答