Как мне разобраться с LESS?

Question

[Trash]

Всем привет! У меня есть такой вот код:

transition: top 200ms linear, opacity 200ms linear;
-moz-transition: top 200ms linear, opacity 200ms linear;
-webkit-transition: top 200ms linear, opacity 200ms linear;

В LESS я делаю следующее:

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

Но вот беда.. когда я вписываю .transition(top 200ms linear, opacity 200ms linear), тобишь изменение прозрачности и высоты) - то выскакивает ошибка компиляции LESS. Чую, что дело в запятой. Будто задан второй параметр.. Может кто сталкивался? В кавычки пробовал обособлять параметр, не работает..

Comments

[7rulnik]

autoprefixer машет вам ручкой

[Сергей delphinpro]

@mixin transition($transition...) {
transition: $transition;
-moz-transition: $transition;
-webkit-transition: $transition;
}
Это код на SCSS, фишка в троеточии. Разве в LESS нет подобного функционала для задания переменного количества параметров?

Answer 1

[Егор Федосенко]

Сталкивались, сталкивались :)
Напишите:

.transition(~'top 200ms linear, opacity 200ms linear');

Аналогично для calc() работает, например
width: calc(~'100% - 20px');

И раз делаете с префиксами, то добавьте и -ms- для IE 9 :)

Comments

[Trash]

Спасибо! Очень помогли!

Answer 2

[Mikhail Osher]

Настоятельно рекомендую отказаться от таких миксинов в пользу Autoprefixer.

Comments

[Trash]

А смысл?

[Сергей delphinpro]

Сергей Валитов: Смысл в том, что вы забудете про префиксы (и миксины, которые написаны для префиксов). Они сами будут расставляться, а вы будете писать красивый код, соответствующий спецификации CSS.

[Mikhail Osher]

Более того, Вы к каждому проекту подберете нужные префиксы для нужных браузеров.