LESS: объединить несколько фоновых правил

Question

У меня есть миксин, который создает градиент с префиксами поставщиков, и я хотел бы добавить этот фон в DIV в дополнение к другому background-image,

.horizontal(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {
    background:@start-color;
    background-image: -webkit-linear-gradient(left, @start-color @start-percent, @end-color @end-percent);
    background-image: -o-linear-gradient(left, @start-color @start-percent, @end-color @end-percent);
    background-image+: linear-gradient(to right, @start-color @start-percent, @end-color @end-percent);
    background-repeat: repeat-x;
  }

.foo
{
  background-image+:url('bg.png');
  .horizontal;
}

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

.foo {
  background-image: url('bg.png'), linear-gradient(to right, #555555 0%, #333333 100%);
  background: #555555;
  background-image: -webkit-linear-gradient(left, #555555 0%, #333333 100%);
  background-image: -o-linear-gradient(left, #555555 0%, #333333 100%);
  background-repeat: repeat-x;
}

Это правильно, но как сделать это также для префиксов других поставщиков без потери гибкости mixin? Я пытался добавить + подписывайся и на другихbackground-image: -webkit...."правила, но в этом случае, в результате CSS будет:

.foo {
  background-image: url('bg.png'), -webkit-linear-gradient(left, #555555 0%, #333333 100%), -o-linear-gradient(left, #555555 0%, #333333 100%), linear-gradient(to right, #555555 0%, #333333 100%);
  background: #555555;
  background-repeat: repeat-x;
}

... очевидно, не правильно... любое предложение?

Answer 1

Использование Less для генерации префиксов поставщиков (или связанных элементов) - не лучший способ сделать это. Гораздо лучше использовать такие библиотеки, как Prefix Free, Auto Prefixer и т. Д.

Сказав это, для вашего случая я думаю, что использование отдельного параметра для изображения будет лучшим вариантом. isurl() функция возвращает true только если входным параметром является URL.

Значение по умолчанию для @image параметр установлен в none потому что это не URL и позаботится об обработке пустых / нулевых значений.

.horizontal(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%; @image: none) {
    background:@start-color;
    & when (isurl(@image)){
        background-image: @image, -webkit-linear-gradient(left, @start-color @start-percent, @end-color @end-percent);
        background-image: @image, -o-linear-gradient(left, @start-color @start-percent, @end-color @end-percent);
        background-image: @image, linear-gradient(to right, @start-color @start-percent, @end-color @end-percent);
    }
    & when not (isurl(@image)){
        background-image: -webkit-linear-gradient(left, @start-color @start-percent, @end-color @end-percent);
        background-image: -o-linear-gradient(left, @start-color @start-percent, @end-color @end-percent);
        background-image: linear-gradient(to right, @start-color @start-percent, @end-color @end-percent);        
    }
    background-repeat: repeat-x;
  }

.foo{
  .horizontal(@image: url('bg.png'));
}
.foo2{
  .horizontal(@image: 'bg.png');
}

В приведенном выше миксине, в зависимости от того, является ли значение для @image переменная является URL или нет, соответствующий вывод будет сгенерирован.

---

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

.horizontal(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%; @image: none; @color: none) {
    background:@start-color;
    & when (isurl(@image)) and not (iscolor(@color)){
        background-image: @image, -webkit-linear-gradient(left, @start-color @start-percent, @end-color @end-percent);
        background-image: @image, -o-linear-gradient(left, @start-color @start-percent, @end-color @end-percent);
        background-image: @image, linear-gradient(to right, @start-color @start-percent, @end-color @end-percent);
    }
    & when (iscolor(@color)) and not (isurl(@image)){
        background-image: @color, -webkit-linear-gradient(left, @start-color @start-percent, @end-color @end-percent);
        background-image: @color, -o-linear-gradient(left, @start-color @start-percent, @end-color @end-percent);
        background-image: @color, linear-gradient(to right, @start-color @start-percent, @end-color @end-percent);
    }
    & when (isurl(@image)) and (iscolor(@color)){
        background-image: @color, @image, -webkit-linear-gradient(left, @start-color @start-percent, @end-color @end-percent);
        background-image: @color, @image, -o-linear-gradient(left, @start-color @start-percent, @end-color @end-percent);
        background-image: @color, @image, linear-gradient(to right, @start-color @start-percent, @end-color @end-percent);        
    }
    & when not (isurl(@image)) and not (iscolor(@color)){
        background-image: -webkit-linear-gradient(left, @start-color @start-percent, @end-color @end-percent);
        background-image: -o-linear-gradient(left, @start-color @start-percent, @end-color @end-percent);
        background-image: linear-gradient(to right, @start-color @start-percent, @end-color @end-percent);        
    }
    background-repeat: repeat-x;
  }

.foo{
  .horizontal(@image: url('bg1.png'));
}
.foo2{
  .horizontal(@image: 'bg.png');
}
.foo3{
  .horizontal(@color: blue);
}
.foo3{
  .horizontal(@color: red; @image: url('abc.gif'));
}

Примечание: я использовал background-image свойство в приведенном выше примере, но если мы хотим использовать сплошной цвет вместе с градиентами и / или изображением, то background свойство должно быть использовано вместо