较少CSS:具有可变参数数量的混合

Question

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

是否有更健壮和简洁的方法来定义转换mixin以获取可变数量的参数并构造适当的转换CSS？

上下文:有时我想转换多个属性; 例如,a :hover可能触发背景颜色,框阴影,文本颜色等的转换...

Answer 1

请参阅我的答案:在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;
}

Answer 2

更新为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 1.3.3的一种解决方案

我们将正确的属性参数构建为字符串transition,然后使用转义的value(~)运算符将其转换为所需的专有语法.通过使用字符串插值(@{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输出

注意:.class1输出no 是因为保护表达式确保输入内容(尽管它不能防止不正确的输入).

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

Answer 3

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

十分简单!

Answer 4

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

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

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

• 该+:用逗号串接的属性值与欠V1.5.0引入
• 该+_:用空格符连接的属性值与欠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);
}

相关回答：

• 这是来自Seven-phases-max的答案，它更多地解释了如何使用这种方法自动添加供应商前缀，就像我在优势段落中提到的那样。