Конкатенация произвольного числа значений в lesscss mixin

Question

Стандартный lesscss mixin:

.box-shadow(@val) {
    -moz-box-shadow: @val;
    box-shadow: @val;
}

Однако в чистом CSS я могу использовать несколько теней от одного элемента, например,

#myBox {
    box-shadow: inset 0px 1px 0px white, 0px 0px 5px #aaa;
    -moz-box-shadow: inset 0px 1px 0px white, 0px 0px 5px #aaa;
}

То есть.создать эффект вставки и свечения.Конечно, я хочу использовать lesscss для исправления проклятия вендора-префикса и в этом случае, но

.box-shadow() {
    -moz-box-shadow: @arguments;
    box-shadow: @arguments;
}

#myBox {
    .box-shadow(inset 0px 1px 0px white, 0px 0px 5px #aaa);
}

отобразит

#myBox {
    box-shadow: inset 0px 1px 0px white 0px 0px 5px #aaa;
    -moz-box-shadow: inset 0px 1px 0px white 0px 0px 5px #aaa;
}

(обратите внимание на пропущенные запятые после white)!Что синтаксически неверно.Есть ли способ обмануть lesscss в объединении нескольких аргументов с , вместо ?Я думал, что это должно быть более или менее стандартной проблемой, но не нашел никаких канонических решений ...

Answer 1

Использовать экранированную строку

#myBox { .box-shadow(~"inset 0px 1px 0px white, 0px 0px 5px #aaa"); }

Или выход из JavaScript

Менее 1.2.0 и ниже:

.box-shadow() {
    @shadow: ~`'@{arguments}'.replace(/[\[\]]/g, '')`;
    -webkit-box-shadow: @shadow;
       -moz-box-shadow: @shadow;
            box-shadow: @shadow;
}
#myBox { .box-shadow(inset 0px 1px 0px white, 0px 0px 5px #aaa); }

Меньше 1.3.0 и выше (требует и использует ... переменный спецификатор):

.box-shadow(...) {
    @shadow: ~`'@{arguments}'.replace(/[\[\]]/g, '')`;
    -webkit-box-shadow: @shadow;
       -moz-box-shadow: @shadow;
            box-shadow: @shadow;
}

Рекомендуемый автором способ является промежуточной переменной:

#myBox {
  @shadow: inset 0px 1px 0px white, 0px 0px 5px #aaa;
  .box-shadow(@shadow);
}

Answer 2

Если вы используете lessphp (http://leafo.net/lessphp/) для компиляции на стороне сервера (вместо компилятора javascript lesscss из http://lesscss.org), вы можете связать функцию php и использовать ее для изменения символа, используемого для конкатенации). .

Пример кода Lesscss:

.linear-gradient(@fallback, @deg, @tail...) {
    background-color: @fallback;
    background-image: linear-gradient(@deg, separateByComma(@tail));
    background-image: -webkit-linear-gradient(@deg, separateByComma(@tail));
    background-image: -moz-linear-gradient(@deg, separateByComma(@tail));
    background-image: -o-linear-gradient(@deg, separateByComma(@tail));
}

body {
    .linear-gradient(#FCFCDD, 135deg, #FCFCDD, #FFFFFF 66%, #FCFCDD);
}

Связанная функция php:

function lesscss_separateByComma($arg) {
    if($arg[0]=='list')
            $arg[1]=',';
        return $arg;
}

И сделать привязку и скомпилировать код lesscss:

$less=new lessc();
$less->registerFunction('separateByComma', 'lesscss_separateByComma');
$code=$less->compile($code);

Выход:

body {
  background-color: yellow;
  background-image: linear-gradient(135deg,#FCFCDD,#FFFFFF 66%,#FCFCDD);
  background-image: -webkit-linear-gradient(135deg,#FCFCDD,#FFFFFF 66%,#FCFCDD);
}

Протестировано с lessphp 0.4.0.

Answer 3

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

.box-shadow() {
    -moz-box-shadow: @arguments;
    box-shadow: @arguments;
}

#myBox {
    .box-shadow(~"inset 0px 1px 0px white, 0px 0px 5px #aaa");
}

Выходы:

#myBox {
  -moz-box-shadow: inset 0px 1px 0px white, 0px 0px 5px #aaa;
  box-shadow: inset 0px 1px 0px white, 0px 0px 5px #aaa;
}

Answer 4

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

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

    -webkit-box-shadow: @value;
    -moz-box-shadow: @value;
    -ms-box-shadow: @value;
    -o-box-shadow: @value;
    box-shadow: @value;
}