Как создать несколько значений box-shadow в LESS CSS

Прочтите это

Есть несколько "правильных" ответов. Поскольку этот вопрос получает много трафика, я решил, что должен идти в ногу с тем, что (я думаю) лучший ответ (на основе документации LESS) по мере того, как проект LESS созревает, и соответственно меняет принятый ответ.

Я использую LESS, и мне не удалось найти исправление для разрешения нескольких теней CSS3. У меня есть следующий mixin:

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

и я пытаюсь это сделать:

.box-shadow(
    inset 0 0 50px rgba(0,0,0,0.3),
    0 0 10px rgba(0,0,0,0.5);
);

Это работает в обычном CSS3, но не выполняется при запуске из файла LESS. Я где-то читал, что запятая, разделяющая 2 тени, вызывает проблему в парсере LESS.

Кто-нибудь знает, как сделать эту работу? Единственным обходным решением, которое я могу придумать, является создание дополнительного файла CSS, который содержит мои множественные свойства теневой коробки.

Ответ 1

Лучшее решение - сделать отдельные перегрузки для каждого количества теней. Меньше обрабатывает правильное разрешение перегрузки:

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

.box-shadow(@shadow1, @shadow2) {
    -webkit-box-shadow: @shadow1, @shadow2;
    -moz-box-shadow: @shadow1, @shadow2;
    box-shadow: @shadow1, @shadow2;
}    

.box-shadow(@shadow1, @shadow2, @shadow3) {
    -webkit-box-shadow: @shadow1, @shadow2, @shadow3;
    -moz-box-shadow: @shadow1, @shadow2, @shadow3;
    box-shadow: @shadow1, @shadow2, @shadow3;
}

.box-shadow(@shadow1, @shadow2, @shadow3, @shadow4) {
    -webkit-box-shadow: @shadow1, @shadow2, @shadow3, @shadow4;
    -moz-box-shadow: @shadow1, @shadow2, @shadow3, @shadow4;
    box-shadow: @shadow1, @shadow2, @shadow3, @shadow4;
}

.box-shadow(@shadow1, @shadow2, @shadow3, @shadow4, @shadow5) {
    -webkit-box-shadow: @shadow1, @shadow2, @shadow3, @shadow4, @shadow5;
    -moz-box-shadow: @shadow1, @shadow2, @shadow3, @shadow4, @shadow5;
    box-shadow: @shadow1, @shadow2, @shadow3, @shadow4, @shadow5;
}

EDIT:

Хорошо, я все еще узнаю о LESS, но, похоже, на самом деле будет смешивать ВСЕ перегрузки в определенных ситуациях, а не с одним из наиболее применимых списков параметров, чтобы вы могли получить различные результаты. С тех пор я пересмотрел свои миксины так, чтобы они назывались box-shadow-2 или box-shadow-3, чтобы соответствовать ожидаемому числу параметров. Я пересмотрю свой ответ, когда выясню, что происходит/у вас есть лучшее решение.

Ответ 2

Это работает с более новыми версиями LESS:

.box-shadow(2px 2px 3px rgba(0,0,0,.4), 0px 0px 5px rgba(0,0,0,.8););
                                  // this semicolon is important! ^

И эта уродливая версия работает даже с версиями старше LESS:

.box-shadow(~"2px 2px 3px rgba(0,0,0,.4), 0px 0px 5px rgba(0,0,0,.8)");

Update: МЕНЬЕ развилось, поэтому этот ответ был обновлен и теперь снова верен. Спасибо Michał Rybak

Ответ 3

Он должен работать нормально. Я использовал его раньше. Попробуйте этот mixin:

.box-shadow (@shadow1, @shadow2: transparent 0 0 0 ) {
    -moz-box-shadow: @shadow1, @shadow2;
    -webkit-box-shadow: @shadow1, @shadow2;
    box-shadow: @shadow1, @shadow2;
}

И затем:

.box-shadow(inset 0 0 50px rgba(0,0,0,0.3), 0 0 10px rgba(0,0,0,0.5));

Ответ 4

Меньшая полоса запятой. Значением @arguments становится:

inset 0 0 50px rgba(0,0,0,0.3) 0 0 10px rgba(0,0,0,0.5);

Это недопустимо как тень окна.

Вместо этого сделайте это, когда вы хотите запятую:

@temp: inset 0 0 50px rgba(0,0,0,0.3), 0 0 10px rgba(0,0,0,0.5);

.box-shadow(@temp);

Ответ 5

.box-shadow (@shadow1) {
    -webkit-box-shadow: @shadow1;
    -moz-box-shadow: @shadow1;
    -ms-box-shadow: @shadow1;
    -o-box-shadow: @shadow1;
    box-shadow: @shadow1;
}
.box-shadow (@shadow1, @shadow2) {
    @temp: @shadow1, @shadow2;
    .box-shadow(@temp);
}
.box-shadow (@shadow1, @shadow2, @shadow3) {
    @temp: @shadow1, @shadow2, @shadow3;
    .box-shadow(@temp);
}

Ответ 6

Этот вопрос является своего рода устаревшим, так как на данный момент ваше решение действительно работает.

Однако я попытаюсь объяснить, почему, потому что многие люди, похоже, не знают об этом:

Фактически передача списка разделенных запятыми аргументов в mixin довольно проста: просто используйте точку с запятой (;) вместо запятой в вызове mixin.

Из МЕНЬЕ документация:

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

Точка с запятой не имеет такого ограничения. Если компилятор видит хотя бы одну точку с запятой внутри вызова или объявления mixin, он предполагает, что аргументы разделяются точкой с запятой. Все запятые тогда принадлежат спискам css.

Определение Mixin использует хорошо известный регулярный синтаксис:

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

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

.box-shadow(
  inset 0 0 50px rgba(0,0,0,0.3), 0 0 10px rgba(0,0,0,0.5);
);

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

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

Ответ 7

Вот еще одно решение (которое я предпочитаю больше):

Используйте функцию e() string. Пример: e("S1, S2") вернет S1, S2 без кавычек.

Длинный пример:

Определение:

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

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

.box-shadow( e("inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(255,255,255,.2)") );

Выход:

-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(255,255,255,.2);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(255,255,255,.2);
box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(255,255,255,.2);

Ссылка: http://lesscss.org/functions/#string-functions-e