Несколько переходов для Twitter-загрузки.

.transition(opacity 0.5s, margin 0.25s);: нет вывода
.transition('opacity 0.5s, margin 0.25s');: Неверный вывод CSS
.transition(opacity 0.5s); .transition(margin 0.25s);: маржа переопределяет непрозрачность.

Обратите внимание, что я использую lessphp, поэтому решения, которые используют JavaScript-регекс, не будут работать.

Я знаю, что могу скопировать mixin и изменить его, чтобы принять два параметра, но это просто кажется взломанным, конечно, есть лучший способ?

Ответы

Ответ 1

Два параметра (в зависимости от версии LESS)

МЕНЬШЕ (1.3.3 +)

less2css.org показывает, что это работает с LESS 1.3.2 при экспериментировании, но выпуск документации, похоже, указывает на то, что это дополнение к версии 1.4.

Всякий раз, когда он вступил в силу, в какой-то момент точка с запятой была введена в качестве возможного разделителя переменных в параметрических миксинах, сохраняя при этом запятые. Наличие параметра ; вызывает просмотр запятых не как разделяющих переменных, а скорее как часть значения самой переменной (список, разделенный запятыми). Это позволяет (процитировать сайт) нам использовать "фиктивную точку с запятой" для создания вызова mixin с одним аргументом, содержащим список css, разделенный запятой".

Следовательно, следующее работает для получения того же вывода, что и выше без экранированной строки ( ПРИМЕЧАНИЕ точка с запятой "dummy", помещенная в конце записи переменной, прямо перед закрывающая скобка вызова параметрического mixin):

.transition(opacity 0.5s, margin 0.25s;);
                                      |
                                semicolon here

МЕНЬШЕ (до 1.3.3, но также работает в более поздних версиях)

Сделайте строчную интерполяцию (~) для переданных в переменных:

.transition(~"opacity 0.5s, margin 0.25s");

Оба выходных решения:

-webkit-transition: opacity 0.5s, margin 0.25s;
-moz-transition: opacity 0.5s, margin 0.25s;
-o-transition: opacity 0.5s, margin 0.25s;
transition: opacity 0.5s, margin 0.25s;