Меньше 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 */
}

Однако это не всегда работает с такими свойствами, как переходы. Если вы пытаетесь иметь несколько переходов и пытаетесь вызвать миксин несколько раз, последний миксин переопределяет все ранее определенные переходы.Это потому, что правильный синтаксис CSS3 для определения нескольких переходов::

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

Единственный способ, который я могу придумать, чтобы определить несколько переходов как миксины, — это перегрузить миксин:

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

Есть ли более надежный и лаконичный способ определения примеси перехода, чтобы принимать переменное количество аргументов и создавать соответствующий переходный CSS?

Контекст:Иногда я хотел бы перейти на несколько свойств; например, :hoverможет запускать переходы по цвету фона, тени блока -, цвету текста -и т. д...

26
задан Harry 19 February 2016 в 10:48
поделиться