更少的CSS：参数可变的Mixins

一尘不染

更少的CSS：参数可变的Mixins

css

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？

上下文： 有时我想在多个属性上过渡；例如，:hover可能会触发背景颜色，框阴影，文本颜色等的过渡…

阅读 290

2020-05-16

共1个答案

一尘不染

在这里查看我的答案：混合属性中多个属性被视为单独的参数

摘要：使用此mixin来获取可变数量的参数：

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

    -webkit-transition: @value;
    -moz-transition: @value;
    -ms-transition: @value;
    -o-transition: @value;
    transition: @value;
}

2020-05-16