Меньше CSS: миксины с переменным количеством аргументов

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

Резюме: используйте этот миксин для переменного количества аргументов:

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

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

ОБНОВЛЕНИЕ для МЕНЬШЕ 1.3.3+

Вывод такой же, но обратите внимание на разницу в том, как свойства могут быть переданы в более новых версиях LESS с использованием точки с запятой вместо экранированной строки:

@prop1: color;
@prop2: opacity;
@dur1: 3s;
@dur2: 4s;

.transition(@transString: 0) when not (@transString = 0) {
    transition:         @transString;
    -moz-transition:    @transString; /* Firefox 4 */
    -webkit-transition: @transString; /* Safari and Chrome */
    -o-transition:      @transString; /* Opera */
}

.class1 {.transition();}
.class2 {.transition(width 2s, height 2s;);}
                                        ^
                                   semicolon here
.class3 {.transition(@prop1 @dur1, @prop2 @dur2;);}
                                               ^
                                         semicolon here

Точка с запятой заставляет запятые оцениваться как разделители списков, а не как разделители параметров.

Одно решение для LESS до версии 1.3.3

Мы создаем правильные аргументы свойства в виде строки для transition, затем используем оператор экранированного значения (~) для преобразования этого в необходимый собственный синтаксис. Используя интерполяцию строк (@{variableName}), мы можем даже встраивать переменные в процесс, но фактический ввод должен быть в виде экранированной строки.

МЕНЬШЕ кода

@prop1: color;
@prop2: opacity;
@dur1: 3s;
@dur2: 4s;

.transition(@transString: 0) when not (@transString = 0) {
    transition:         @transString;
    -moz-transition:    @transString; /* Firefox 4 */
    -webkit-transition: @transString; /* Safari and Chrome */
    -o-transition:      @transString; /* Opera */
}

.class1 {.transition();}
.class2 {.transition(~" width 2s, height 2s");}
.class3 {.transition(~" @{prop1} @{dur1}, @{prop2} @{dur2}");}

Вывод CSS

Примечание: .class1 не выводится, потому что защитное выражение гарантирует, что что-то введено (хотя и не защищает от неправильного ввода).

.class2 {
  transition: width 2s, height 2s;
  -moz-transition: width 2s, height 2s;
  -webkit-transition: width 2s, height 2s;
  -o-transition: width 2s, height 2s;
}
.class3 {
  transition: color 3s, opacity 4s;
  -moz-transition: color 3s, opacity 4s;
  -webkit-transition: color 3s, opacity 4s;
  -o-transition: color 3s, opacity 4s;
}

В LESS вы можете разделять аргументы запятыми ИЛИ точками с запятой. Для одиночных значений, содержащих запятые, вы можете завершить это единственное значение точкой с запятой, чтобы отправить список как одно значение, например:

.class {
  .background-size(100%, auto;);
}

Для нескольких значений просто используйте этот синтаксис:

/* Example mixin */
.set-font-properties(@font-family, @size) {  
  font-family: @font-family;
  font-size: @size;
}
/* Usage with comma-separated values */
.class {
  .set-font-properties(Arial, sans-serif; 16px);
}

/* Output */
.class {
  font-family: Arial, sans-serif;
  font-size: 16px;
}

Очень просто!

Примечание. Этот ответ добавлен не с целью сказать, что существующие ответы неверны или устарели. Все ответы действительны и все равно будут работать. Этот просто предоставляет другой метод, который, на мой взгляд, немного сложнее, но также и более гибкий с точки зрения того, как каждый аргумент может быть упомянут как пары ключ-значение.

Преимущества использования этого метода: этот метод станет более полезным, когда необходимо выполнить какую-либо дополнительную операцию над значениями (например, добавить unit как deg, px или выполнить какие-либо дополнительные математические операции и т. д.) или также динамическое добавление префиксов поставщиков для @property. Например, бывают случаи, когда вы можете захотеть передать только transform в качестве входного свойства примеси, но хотите добавить -webkit-transform для -webkit-transition и -moz-transform для -moz-transition и т. д.

В этом методе мы используем функцию ..., которая позволяет нам передавать переменное количество аргументов миксину, циклически перебирать каждый переданный аргумент, extract имя свойства вместе с дополнительными параметрами (такими как продолжительность, степень вращения д.), а затем используйте функция объединения, предоставляемая Меньше, чтобы объединить значения, указанные для свойства.

• +: объединяет значения свойств с запятой и было введено в Less v1.5.0.
• +_: объединяет значения свойств с пробелом и был представлен в Less v1.7.0. .

.transition(@args...){
    .loop-args(@argCount) when (@argCount > 0) {
        .loop-args(@argCount - 1);
        @arg: extract(@args, @argCount);
        @property: extract(@arg,1);
        @duration: extract(@arg,2);
        -webkit-transition+: @property @duration;
        -moz-transition+: @property @duration;
        -o-transition+: @property @duration;
        transition+: @property @duration;
    }
    .loop-args(length(@args));    
}

div{
    .transition(background, 1s; border-color, 2s; color, 2s);
}

.transform(@args...){
    .loop-args(@argCount) when (@argCount > 0) {
        .loop-args(@argCount - 1);
        @arg: extract(@args, @argCount);
        @property: extract(@arg,1);
        @param: extract(@arg,2);
        -webkit-transform+_: ~"@{property}(@{param})";
        -moz-transform+_: ~"@{property}(@{param})";
        -o-transform+_: ~"@{property}(@{param})";
        transform+_: ~"@{property}(@{param})";
    }
    .loop-args(length(@args));    
}

div#div2{
    .transform(rotate, 20deg; scale, 1.5; translateX, 10px);
}

Приведенный выше код при компиляции выдаст следующий вывод:

div {
    -webkit-transition: background 1s, border-color 2s, color 2s;
    -moz-transition: background 1s, border-color 2s, color 2s;
    -o-transition: background 1s, border-color 2s, color 2s;
    transition: background 1s, border-color 2s, color 2s;
}
div#div2 {
    -webkit-transform: rotate(20deg) scale(1.5) translateX(10px);
    -moz-transform: rotate(20deg) scale(1.5) translateX(10px);
    -o-transform: rotate(20deg) scale(1.5) translateX(10px);
    transform: rotate(20deg) scale(1.5) translateX(10px);
}

Похожий ответ:

• Вот ответ от seven-phases-max, который объясняет, как этот метод можно использовать для автоматического добавления префиксов поставщиков, как я упоминал в параграфе о преимуществах.

Это должно сработать, я думаю:

.transition(...) {
    transition:         @arguments;
    -moz-transition:    @arguments; /* Firefox 4 */
    -webkit-transition: @arguments; /* Safari and Chrome */
    -o-transition:      @arguments; /* Opera */
}

... - допустимый синтаксис меньшего размера, а не то, что нужно заменить.

Актуальна для LESS 1.4, документация (http://lesscss.org/features/#mixins-parametric-feature-mixins-with-multiple-parameters) предлагает правильный способ справиться с этим:

Использование запятой в качестве разделителя примесей делает невозможным создание списков, разделенных запятыми, в качестве аргумента. С другой стороны, если компилятор видит хотя бы одну точку с запятой внутри вызова или объявления миксина, он предполагает, что аргументы разделены точкой с запятой и все запятые принадлежат спискам css:

В частности, примесь:

.transition(@prop-or-props) {
    -webkit-transition: @prop-or-props;
       -moz-transition: @prop-or-props;
         -o-transition: @prop-or-props;
            transition: @prop-or-props;
}

использование:

.transition(opacity .2s, transform .3s, -webkit-transform .3s;);

Обратите внимание, что несколько свойств разделяются запятыми, а завершающая точка с запятой приводит к тому, что список, разделенный запятыми, обрабатывается как один параметр в миксине.

Было бы лучше определить миксин с параметром rest... и иметь возможность извлекать каждый элемент аргументов произвольной длины для отдельной обработки, но вариант использования, о котором я думаю, — это добавление префиксов поставщиков для преобразования переходов (чтобы я мог вызовите его просто с помощью .transition(opacity .2s, transform .3s) и автоматически добавьте бит -webkit-transform), и, возможно, в любом случае это лучше обрабатывается другой утилитой (например, gulp-autoprefixer).