减CSS：带有参数的可变数目的混入(Less CSS: Mixins with Variable N

2019-06-14 18:48发布

站内文章 / 前沿技术

143 0

祖国的老花朵

女 | 书童

私信

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 */
}

然而，这并不总是与性工作，如过渡。如果你想拥有多个过渡和尝试将混入多次打电话，最后混入覆盖所有先前定义的转变。这是因为用于定义多个过渡正确的CSS3语法是：

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

我能想到的定义多个过渡为混入是重载混入的唯一方法：

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

有没有定义过渡MIXIN采取的参数个数可变，构建适当的过渡CSS的一个更强大和简洁的方式？

背景：有时候我想对多个属性转换; 例如:hover可能会触发背景颜色，箱阴影，文本颜色等过渡...

Answer 1:

看到这里我的答案：多个属性越来越视为混入不同的参数

摘要：使用混入了不同的参数个数：

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

更新LESS 1.3.3+

输出是一样的，但要注意如何属性可以通过使用分号，而不是做一个转义字符串的新版本少传递的区别：

@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

分号强制逗号被作为列表分隔符，而不是参数分隔评价。

对于不太预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输出

注：没有.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;
}

Answer 3:

在更短的，可以单独使用逗号或分号的论点。对于单值包括逗号，你可以终止，以便分号是单值发送列表作为一个值，如下所示：

.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为输入属性的混入，但要添加-webkit-transform为-webkit-transition和-moz-transform为-moz-transition等。

在这种方法中，我们利用的...功能，它允许我们通过可变数量的参数给一个mixin，循环每个参数传递， extract与其他参数（如持续时间，程度沿线物业的名称的旋转等），然后使用合并功能是由以下提供来连接该属性指定的值。

该+:用逗号串接的属性值与欠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);
}

相关答案：

这里是一个答案七个阶段-MAX这也解释了更多关于如何此方法可用于自动添加供应商前缀像我的优势段落提到。

Answer 5:

这应该工作，我认为：

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

... -是一个有效的少的语法，不是更换。

Answer 6:

当前为少1.4，文档（ http://lesscss.org/features/#mixins-parametric-feature-mixins-with-multiple-parameters ）提出来处理这个正确的方法：

使用逗号作为混入分离器使得它不可能创造逗号分隔的列表作为参数。在另一方面，如果编译器看到混入来电或声明中的至少一个分号，它假定参数之间用分号隔开，所有逗号属于CSS列表：

具体而言，混入：

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

需要注意的是多个属性以逗号分隔和后半结肠导致要视为在混入单个参数的逗号分隔的列表。

这将是更好的界定与该混入rest...参数，并能够提取的任意长度参数单独的处理每一个元素，但我想的用例是将供应商前缀转变的过渡（所以我可以简单地把它.transition(opacity .2s, transform .3s)并有-webkit-transform位自动添加），也许这是更好地通过不同的程序来处理呢（一饮而尽-autoprefixer，例如）。

文章来源: Less CSS: Mixins with Variable Number of Arguments