Использование неопределенного количества аргументов в Mixins

Question

Я в настоящее время имеют -webkit специфические атрибуты в моей Less CSS лист, я пытаюсь обновить их с mixins добавить -moz атрибуты, например:

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

div { 
    .transition(all .5s); 
} 

В приведенном выше примере отлично работает однако у меня есть такие вещи:

div { 
    -webkit-transition: border-color .3s, background .3s; 
} 

И я не могу назвать mixin в .transition(border-color .3s, background .3s), потому что он имеет больше аргументов, чем определено в mixin. Так что я делаю в данный момент заключается в следующем:

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

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

Это раздражает, мне нужно добавить избыточный код в моем листе в любое время я использую ряд аргументов, которые ранее не использовали ранее; и у меня есть эта проблема с другими свойствами CSS3, например box-shadow, когда мне нужно добавить inset в начале.

Есть ли способ объявить mixins гибким в своем числе аргументов с меньшим, как и свойства CSS3?

Answer 1

Вы можете попробовать

.transition(@1) { 
    -webkit-transition: @1; 
    -moz-transition: @1; 
} 
.transition-2(@1, @2) { 
    .transition(@1); // this includes all the stuff from transition(@1) 
    color:red; // additional stuff 
} 

Что касается вашего актуального вопроса, я не верю, что МЕНЬШЕ сам имеет какое-либо «отдых» аргументы в стиле проходящих.

Answer 2

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

Вариант 1: (раствор Простейшие - благодаря семь фаз-макс для highlighting the miss)

Мы можем использовать точку с запятой в качестве разделителя/разделителя аргументов и, когда мы добавим запятой на end после указания всех свойств, которые необходимо переместить (в формате, разделенном запятыми), вся часть перед ним будет рассматриваться как один аргумент.

Выписка из official Less website:

Использование запятой в качестве разделителя подмешать делает невозможным создание разделенные запятой списки в качестве аргумента. С другой стороны, если компилятор видит по меньшей мере, одну точку с запятой внутри подмешать вызова или декларации, он предполагает, что аргументы разделяются точкой с запятой, и все запятые принадлежат к спискам CSS

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

div{ 
    .transition(border-color .5s, background .3s, color .3s;); 
} 

So приведенный выше код при компиляции будет результат в

div { 
    -webkit-transition: border-color 0.5s, background 0.3s, color 0.3s; 
    -moz-transition: border-color 0.5s, background 0.3s, color 0.3s; 
} 

---

Вариант 2:

Передайте входные значения в mixin (сколько когда-либо конкретных свойств необходимо переходить) в кавычки. Внутри mixin используйте встроенные функции ~ или e(), чтобы снять кавычки.

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

div { 
    .transition("border-color .5s, background .3s"); 
} 
div#sample2 { 
    .transition("border-color .3s, background .3s, color .3s"); 
} 

будет производить ниже CSS при компиляции

div { 
    -webkit-transition: border-color .5s, background .3s; 
    -moz-transition: border-color .5s, background .3s; 
} 
div#sample2 { 
    -webkit-transition: border-color .3s, background .3s, color .3s; 
    -moz-transition: border-color .3s, background .3s, color .3s; 
} 

---

Вариант 3:

Less действительно позволяет создание Mixins, которые позволяют/принимать переменное число входов с помощью ... вариант. Следовательно, вы можете использовать тот же mixin, что и в вашем исходном коде, добавив ... к входной переменной и вызвав ее так, как вы изначально хотели.

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

div { 
    .transition(border-color .5s, background .3s); 
} 

Вышеприведенное будет успешно скомпилировано, но единственная проблема в том, что он сгенерировал бы выходной результат при компиляции. Как вы можете видеть, проблема в том, что значения параметров разделяются пробелом и не разделяются запятыми (как и должно быть, чтобы CSS работал правильно).

div { 
    -webkit-transition: border-color 0.5s background 0.3s; 
    -moz-transition: border-color 0.5s background 0.3s; 
} 

Ofcourse мы могли бы писать сложные replace функций с использованием регулярных выражений, но это было бы действительно сделать код грязным. Вместо этого мы могли бы использовать циклы и некоторые встроенные функции для достижения требуемого результата (как показано ниже).

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

div { 
    .transition(border-color .5s, background .3s, color .3s); 
} 

В основном то, что мы делаем, это использовать ... принимать несколько аргументов в качестве вклада в Mixin, а затем цикла по каждому аргументу и добавить его значения свойства CSS в. +: (функция слияния, введенная в Less v1.5.0) используется для создания выхода с разделителями-запятыми.

При компиляции, он будет производить ниже вывод:

div { 
    -webkit-transition: border-color 0.5s, background 0.3s, color 0.3s; 
    -moz-transition: border-color 0.5s, background 0.3s, color 0.3s; 
}