少CSS：混合与可变数目的参数 [英] Less CSS: Mixins with Variable Number of Arguments

问题描述

LESS允许参数混合，例如：

LESS allows parametric mixins, such as:

.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语法是：

However, this doesn't always work with properties such as transitions. If you are trying to have multiple transitions and attempt to call the mixin multiple times, the last mixin overrides all previously defined transitions. That's because the proper CSS3 syntax for defining multiple transitions is:

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

我可以将多个转换定义为mixins的唯一方法是重载mixin：

The only way that I can think of to define multiple transitions as mixins is to overload the mixin:

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

有一个更强大和简洁的方法来定义转换混合，以获取可变数量的参数，转换CSS？

Is there a more robust and concise way of defining the transition mixin to take in a variable number of arguments and construct the appropriate transition CSS?

上下文：有时候我想转换多个属性;例如，：hover 可能会触发背景颜色，框阴影，文字颜色等的转换...

Context: Sometimes I'd like to transition on multiple properties; for example, a :hover might trigger transitions on background color, box-shadow, text-color, etc...

推荐答案

请参阅我的回答：使用CSS mixins中的参数的问题（使用LESS）

摘要：对于可变数量的参数使用这个mixin：

Summary: use this mixin for variable number of arguments:

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

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

这篇关于少CSS：混合与可变数目的参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！