Я ввожу 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
.Вот что я пробовал до сих пор:
.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 )'")
.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 )'")
.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.