Как добавить разные стили CSS для каждого n-го элемента, в зависимости от n, используя LESS

Question

Я пытаюсь добавить различные отступы к последующим элементам в div.Мой DOM выглядит довольно просто.

<div class="parent">
   <div>0</div>
   <div>15</div>
   <div>30</div>
   ...
</div>

Так что я бы хотел, чтобы у моего первого элемента было 0 отступов, у меня второе 15, третье 30 и т. Д. Используя LESS , как я могу сделать это?Работа?Я пробовал:

.parent div:nth-of-type(n) {
           padding-left: n*15px;
}

Спасибо!

Answer 1

Использование меньше (но вы должны установить количество элементов):

.parent (@indexstart,@index) when (@indexstart < @index ){
  div:nth-child(@{indexstart}){
    padding-left: (@indexstart - 1) * 15px;
  }
  .parent (@indexstart + 1,@index);
}
.parent (1,4);

См. Пример

Answer 2

Полагаю, вы хотите достичь лестницы визуально.В этом случае вы можете сделать это, как показано ниже:

.parent {
  line-height: 1.2em;
}

.parent>div:not(:first-child)::before {
  content: "";
  float: left;
  width: 15px; /*your padding*/
  height: calc(1.2em + 2px);
  
  background: #f2f2f2; /*To illustrate the stair effect*/
}

<div class="parent">
  <div>0</div>
  <div>15</div>
  <div>30</div>
  <div>45</div>
  <div>60</div>
  <div>75</div>
</div>