Как задать через loop мультиградиент?

Question

[Вадим Белкин]

В CSS у элемента задаю несколько радиальных градиентов (в примере двумя, а вообще от 1 до 4 нужно)

.element {
background: radial-gradient(25% 20px at 25% 20px, rgba(0, 0, 0, .1) 0%, transparent 100%), radial-gradient(25% 20px at 75% 20px, rgba(0, 0, 0, .1) 0%, transparent 100%);
}

Можно ли сделать в LESS чтобы параметр background задавался в цикле, в зависимости от кол-ва передаваемых градиентов? В параметрах градиента меняется только та часть, что задана в процентах (25%, 75%)

Один выход нашёл

.loop-shadow(@counter, @i: 1) when (@i =< @counter) {
  .loop-shadow(@counter, (@i + 1));
  background-image+: radial-gradient((50% / @counter) 20px at ((50% / @counter) * (2 * @i - 1)) 20px, rgba(0, 0, 0, .1) 0%, transparent 100%);
}

Генерирует как нужно, но проблема в том что таким образом не могу задать два background-image -webkit-radial-gradient и radial-gradient отдельными background-image элементу, так как они сливаются в один

Answer 1

[Роман]

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

Comments

[Вадим Белкин]

Не через циклы, наверное выразился не правильно. Через loop.

[Роман]

Вадим Белкин: да одно и то же =) Я вас понял.
Вот нашел, оказывается в лессе можно делать циклы:
blog.codepen.io/2013/12/04/loops-preprocessor-syntaxes