Могу ли я определить миксин LESS для создания свойства перехода -с переменным числом параметров?

Я ввожу LESS в большое веб-приложение проект, чтобы упростить мой CSS. У меня есть несколько правил CSS, которые применяют переходы к различному количеству свойств, например:

.movable {
    transition-property: top, left;
    transition-duration: 0.2s;
    transition-timing-function: ease;
}

.fadeAndStretchable {
    transition-property: opacity, width, height, margin;
    transition-duration: 1.5s;
    transition-timing-function: ease-out;
}

(Примечание :Я опустил здесь свойства -webkit, -mozи -oдля краткости :в на самом деле каждое из этих правил состоит из 12 строк, а не из 3.)

Обратите внимание, что значения для transition-propertyразделены запятыми -. Это необычно для CSS :несколько значений обычно разделяются пробелом -(, как вborder: 1px solid #f00). Примеси LESS могут использовать специальное значение @argumentsдля создания разделенного пробелом -списка всех аргументов примеси -, но можно ли определить примесь LESS, которая принимает переменное количество параметров и превращает их в список значений, разделенных запятыми -, подходит для transition-property?

Если необходимо, я доволен решением, которое требует двух миксинов :один для transition-property, а другой для transition-durationи transition-timing-function.Вот что я пробовал до сих пор:

Попытка 1 :с использованием @arguments с безымянными параметрами

.transition-property() {
    -webkit-transition-property: @arguments;
    -moz-transition-property: @arguments;
    -o-transition-property: @arguments;
    transition-property: @arguments;
}

.movable {
   .transition-property(top, left);
}

Результат :Ошибка LESS («Не найдено подходящее определение для свойства.transition -(top, left )'")

Попытка 2 :с использованием @arguments с именованными параметрами

.transition-property(@p1, @p2, @p3, @p4, @p5) {
    -webkit-transition-property: @arguments;
    -moz-transition-property: @arguments;
    -o-transition-property: @arguments;
    transition-property: @arguments;
}

.movable {
   .transition-property(top, left);
}

Результат :Ошибка МЕНЬШЕ ("Не найдено подходящего определения для свойства '.transition -(top, left )'")

Попытка 3 :использование именованных параметров с фиктивными значениями по умолчанию

.transition-property(@p1:p1, @p2:p2, @p3:p3, @p4:p4, @p5:p5) {
    -webkit-transition-property: @p1, @p2, @p3, @p4, @p5;
    -moz-transition-property:  @p1, @p2, @p3, @p4, @p5;
    -o-transition-property:  @p1, @p2, @p3, @p4, @p5;
    transition-property:  @p1, @p2, @p3, @p4, @p5;
}

.movable {
   .transition-property(top, left);
}

Результат :Нет ошибки LESS, но создается правило CSS -webkit-transition-property: top, left, p3, p4, p5, которое браузер игнорирует из-за непризнанные свойства.

Я пробовал различные другие подходы (, например. передача свойства в виде строки 'top,left'), но все они приводят к одному и тому же :либо к ошибке МЕНЬШЕ, либо к недопустимому CSS.

Есть ли способ обойти это? Или мне нужно стиснуть зубы и определить набор примесей, перегруженных арностью, например.

.transition-property(@p1) {...}
.transition-property(@p1, @p2) {...}
.transition-property(@p1, @p2, @p3) {...}
.transition-property(@p1, @p2, @p3, @p4) {...}
etc.

16
задан Mark Whitaker 1 August 2017 в 11:15
поделиться