Несколько свойств рассматриваются как отдельные аргументы в mixins

Question

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

Текущий код

.transition(@property: all, @time: 1s, @timing: ease-in-out) {
    -moz-transition: @property @time @timing;
    -webkit-transition: @property @time @timing;
    -o-transition: @property @time @timing;
    transition: @property @time @timing;
}

a {
    .transition(color, opacity, .5s);
}

Требуемый вывод

a {
    -moz-transition: color, opacity .5s ease-in-out;
    -webkit-transition: color, opacity .5s ease-in-out;
    -o-transition: color, opacity .5s ease-in-out;
    transition: color, opacity .5s ease-in-out; 
}

Фактический вывод

a {
    -moz-transition: color opacity .5s;
    -webkit-transition: color opacity .5s;
    -o-transition: color opacity .5s;
    transition: color opacity .5s;  
}

Есть идеи?

Answer 1

Я бы предложил использовать escape-функцию LESS, а именно:

a:link, a:visited { 
    color: green;
    opacity: .5;
    font-size: 1em;
}

a:hover {
    color: red;
    opacity: 1;
    font-size: 2em;
    .transition(e("font-size, color"));
}

И хотя кажется, что LESS принимает это, он будет анимировать только последнее свойство в строке через запятую, которую вы отправляете.Жаль.

Answer 2

Используя найденное решение здесь работает с один И несколько аргументы:

.transition (@value1,@value2:X,...)
{
    @value: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`;

    -webkit-transition: @value;
    -moz-transition: @value;
    -ms-transition: @value;
    -o-transition: @value;
    transition: @value;
}

Используя это следующим образом:

.transition(color, opacity .5s ease-in-out);

выход:

-webkit-transition: color, opacity .5s ease-in-out;
-moz-transition: color, opacity .5s ease-in-out;
-ms-transition: color, opacity .5s ease-in-out;
-o-transition: color, opacity .5s ease-in-outt;
transition: color, opacity .5s ease-in-out;

Answer 3

Если вы хотите передать разделенный запятыми список в качестве аргумента для mixin, вы можете просто использовать точку с запятой для разделения аргументов .

Приведенный ниже код работает так, как вам нужно, с выбранным вами миксином:

a {
    .transition(color, opacity; .5s);
}

Answer 4

Меньше миксинов имеют возможность использовать аргументы через точку с запятой (а также через запятую). Они рекомендуют всегда использовать точки с запятой .

Если точка с запятой присутствует в списке аргументов при вызове mixin, все точки с запятой будут рассматриваться как аргументы, даже если в этих вещах есть запятые. Это позволяет вам передавать список через запятую как аргумент ONE . Если точка с запятой NOT присутствует, она будет рассматривать запятые как разделители аргументов.

.transition(@property: all; @time: 1s; @timing: ease-in-out) { // NOTE THE SEMICOLONS
    transition: @property @time @timing;
}

a {
    .transition(color,opacity; .5s); // SEMICOLON AFTER 'opacity'
}
b {
    .transition(color,opacity, .5s); // COMMA INSTEAD
}

выход:

a {
    transition: color,opacity .5s ease-in-out;
}
b { 
    transition: color opacity .5s; // invalid syntax
}

Обратите внимание, что синтаксис сокращенного свойства transition должен быть разделенным запятыми списком одиночных переходов. Таким образом, b имеет недопустимое значение, а a имеет два перехода, в которых неопределенные значения по умолчанию имеют свои начальные значения:

1. color 0s ease 0s
2. opacity .5s ease-in-out 0s

Вероятно, это не то, что вы намеревались. (Похоже, вы хотели color .5s ease-in-out 0s и opacity .5s ease-in-out 0s.)

---

Теперь вы можете задаться вопросом: «Как передать список через запятую как один аргумент, если нет других аргументов?» Просто добавьте фиктивную точку с запятой в конце списка.

.transition(@property: all; @time: 1s; @timing: ease-in-out) {
    transition: @property @time @timing;
}

b {
    .transition(color,opacity;); // DUMMY SEMICOLON AFTER ARGUMENT
}
i {
    .transition(color,opacity); // MISSING SEMICOLON
}

выход:

b {
    transition: color,opacity 1s ease-in-out; // 'color,opacity' is the first argument
}
i {
    transition: color opacity ease-in-out; // 'color' is 1st arg, 'opacity' is 2nd arg
}

Опять же, синтаксис для i недопустим, и b имеет два перехода:

1. color 0s ease 0s
2. opacity 1s ease-in-out 0s